111
查看
  • 编辑修改
  • 首页
  • UNITY
  • NODEJS
  • PYTHON
  • AI
  • GIT
  • PHP
  • GO
  • CEF3
  • JAVA
  • HTML
  • CSS
devbox
Cpp五条
这个屌丝很懒,什么也没留下!
关注作者
热门标签
  • jquery
  • HTML
  • CSS
  • PHP
  • ASP
  • PYTHON
  • GO
  • AI
  • C
  • C++
  • C#
  • PHOTOSHOP
  • UNITY
  • iOS
  • android
  • vue
  • xml
  • 爬虫
  • SEO
  • LINUX
  • WINDOWS
  • JAVA
  • MFC
  • CEF3
  • CAD
  • NODEJS
  • GIT
  • Pyppeteer
  • article
热门文章
  • 1Ubuntu(WSL2) 源码安装 mysql8.0/mysql5.7_ubuntu安装mysql8.0
  • 2为什么网络安全缺口大,招聘却很少?_为什么网络安全人才缺口大但是难找工作
  • 3金三银四,面试谈薪资的这7个技巧,你一定要学会!_金融行业面式中怎么进行薪资
  • 4Linux—Web服务器(静态、动态网站的搭建)_linux网站服务器搭建
  • 530张java基础思维导图,梳理知识点和思路_思维导图复习java
  • 6代码检视工具Gerrit的日常使用_一个change只有同时满足code review +1 和verify +1后才能被合入代码仓
  • 7浅谈人工智能、大数据等技术在交通领域的应用_了解大数据人工智能车联网云计算等技术在交通工程中的应用
  • 8Spring Boot开发之SpringSercurity(续)_springboot 整个ser
  • 9Hutool导入导出用法
  • 10树莓派python py文件自启_su pi -c python
当前位置:   article > 正文

外层元素overflow:auto/scroll导致absolute定位的子元素溢出部分被隐藏_position 溢出被隐藏怎么解决

作者:Cpp五条 | 2024-02-16 13:35:45

赞

踩

position 溢出被隐藏怎么解决

1. 问题重现

简易版复现这个问题的代码如下:

<div id='wrapper' style="height: 80px;background-color: bisque;width: 400px;overflow-x: auto;display: flex;flex-wrap: nowrap;">
        <div class="menu">111
            <div style="width: 100%;position: absolute;bottom: 40px;height: 100px;background-color: aquamarine;">子元素</div>
        </div>
        <div class="menu">222</div>
        <div class="menu">333 </div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

样式:

.menu{
            width: 50%;
            height: 100%;
            background-color: rgb(149, 182, 241);
            flex-shrink: 0;
            flex-grow: 0;
            margin-right: 10px;
            position: relative;
        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

显示的结果如下:
在这里插入图片描述

目的是实现一个可以横向滑动的菜单栏,其中每个青色部分为一个菜单,点击该菜单可以在其上弹出它的子菜单,但是按照这种实现方式子菜单溢出的部分被隐藏了

导致该问题的原因是最外层div#wrapper设置了overflow且子菜单设置了postion:absolute,从而导致溢出部分隐藏(至于是什么原理尚不知晓,有明白的可以帮忙解答一下。谢谢~)

2. 解决方案

第一种方法:适合知道弹出子菜单宽度的情况(推荐)

大家可能对absolute产生误区,切记,absolute元素在没有任何left/top/right/bottom属性设置,且其祖先元素全部都是非定位元素时,该元素的位置是当前位置而不是浏览器上方(张鑫旭《CSS世界》)!
因此,解决这个问题的方案就是将父菜单的position:relative样式去掉,并且设置子菜单宽度为具体的数值,在移动子菜单时也不能使用left/top/right/bottom属性(因为此时的定位祖先元素不知道在哪,甚至直接是body),可以使用transform进行平移。

	<div id='wrapper'
        style="height: 80px;background-color: bisque;width: 400px;overflow-x: auto;display: flex;flex-wrap: nowrap;margin-top: 100px;">
        <div class="menu">111
            <div style="width: 200px;position: absolute;height: 100px;background-color: aquamarine;">子元素</div>
        </div>
        <div class="menu">222</div>
        <div class="menu">333 </div>
    </div>
    
	.menu {
            width: 50%;
            height: 100%;
            background-color: rgb(149, 182, 241);
            flex-shrink: 0;
            flex-grow: 0;
            margin-right: 10px;
            /* position: relative; */
        }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

第二种方法:通用,但麻烦一点

将弹出的子菜单提到div#wrapper外面来,像很多UI框架(如antd)一样,将弹出层作为body的直接子元素,然后根据点击的父菜单的位置计算子菜单的位置
(.menu样式不变)

<body style="padding: 300px 0;height: 100%;">
    <div id="wrapper" style="height: 80px;background-color: bisque;width: 400px;overflow-x: auto;display: flex;flex-wrap: nowrap;">
        <div class="menu" id="menu1">
            111
        </div>
       ....其他菜单
    </div>
    <div id="submenu" style="width: 150px;position: absolute;height: 100px;background-color: aquamarine;">子元素</div>
</body>
<script>
	/*子菜单显示和隐藏的细节忽略,也不考虑滚动时子菜单的位置问题,只关注子菜单弹出时的位置*/
    //使用事件委托添加按钮点击事件
    document.getElementById('wrapper').onclick=e=>{
        let source=e.srcElement||e.target
        if(source.className==='menu'){
            let pos=document.getElementById(source.id).getBoundingClientRect()
            //减少回流,使用cssText替代style设置子菜单位置
            document.getElementById('submenu').style.cssText+=`left:${pos.left}px;bottom:${pos.bottom+30}px`
        }
    }
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

2. 关于overflow-x和overflow-y混合使用的问题

如果一个其中一个属性的值被赋为visible,另一个被赋值为 scroll 或 auto,那么visible会被重置为’auto’。
当一个元素的 ‘overflow-x’ 或 ‘overflow-y’ 指定值为 ‘hidden’,另一个特性的指定值为 ‘visible’ 时, 该元素最终渲染使用的 ‘overflow-y’ 或 ‘overflow-x’ 值不同。IE6 IE7 IE8 使用 ‘hidden’,其它浏览器使用 ‘auto’。
其他情况overflow使用两者的计算值

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/93792
推荐阅读
  • articlesignature=bf897cc4aa249a41f839877ed90228f0,mysql -...
    Hi! We are using Postgres as our new database for our existi...

    赞

    踩

  • articleExecutable path is not absolute, ignoring: xxx...
    最近在Linux服务器上面部署我写的应用程序,使用的是虚拟环境。具体Linux服务代码如下:[Unit]Descript...

    赞

    踩

  • articleUnity WebGL RuntimeError: integer overflow(整数溢出问题)...
    此枚举在 WebGL 平台中用于定义在 WebAssembly 代码中执行算术运算时使用的捕获类型。WebAssembl...

    赞

    踩

  • articlevue3按需自动导入组件unplugin-auto-import,vue/cli版本_unplugi...
    在package.json的devDependencies,然后npm install。_unplugin-auto-i...

    赞

    踩

  • articlevue-cli项目的vue3自动导入插件unplugin-auto-import_unplugin-...
    vue-cli项目的vue3自动导入插件unplugin-auto-import_unplugin-auto-impor...

    赞

    踩

  • articleunplugin-auto-import,Vue3自动引入api插件_vue3 unplugin-a...
    Vue3自动引入api、Vue3插件_vue3 unplugin-auto-importvue3 unplugin-au...

    赞

    踩

  • articleVue3自动引入组件(unplugin-auto-import和element-plus)_vue3...
    在使用 Vue3 开发项目时,我们经常需要引入多个组件,但是每次手动引入非常麻烦,容易出错。为了解决这个问题,我们可以使...

    赞

    踩

  • article【Vite + Vue3 + TS】unplugin-auto-import自动引入配置及Eslin...
    在Vue3和TypeScript项目中,Vue、VueRouter中的函数需要在每个页面导入,为提高开发效率,我们需要对...

    赞

    踩

  • article【Vue】自动导入组件_unplugin-auto-import...
    插件的作用是自动导入第三方库或组件。它会根据我们在代码中使用的标识符自动检测并导入相应的库或组件。这样,我们就不需要手动...

    赞

    踩

  • article【插件推荐】vue3自动导入unplugin-auto-import_unplugin-auto-i...
    《unplugin-auto-import》它可以把vue3中的方法自动引入,不用大家每个js,ts文件都需要去引入vu...

    赞

    踩

  • articleunplugin-auto-import 和 unplugin-vue-components...
    整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、Re...

    赞

    踩

  • articlevue3+vite插件配置系列2-unplugin-auto-import_unplugin-aut...
    解放双手,自动导入composition api 和 生成全局typescript说明_unplugin-auto-im...

    赞

    踩

  • article【Vue3】自动引入插件-`unplugin-auto-import`_vue3 unplugin-...
    自动导入 api 按需为 Vite, Webpack, Rspack, Rollup 和 esbuild。支持TypeS...

    赞

    踩

  • article分页插件pagehelper-----springboot配置_pagehelper.auto-di...
    1、导入依赖 com.github.pagehelper ...

    赞

    踩

  • article什么是devops,基于Gitlab从零开始搭建自己的持续集成流水线(Pipeline)_gitla...
    持续集成 devops pipeline CI/CD Gitlab 运维_gitlab auto devopsgitla...

    赞

    踩

  • articleGitLab 绑定 GCP 使用 Auto DevOps(可领取GCP $200.00 赠金)...
    Auto DevOps provides pre-defined CI/CD configuration which a...

    赞

    踩

  • articleGitLab Auto DevOps功能与Kubernetes集成教程_.auto_devops...
    介绍在这篇文章中,我们将介绍如何将GitLab的Auto DevOps功能与Rancher管理的Kubernetes集群...

    赞

    踩

  • articleAuto DevOps之gitlab CI/CD_gitlab auto devops...
    文章目录CI/CD介绍CI/CD的工作流程ci整体原理安装gitlab runner编写.gitlab-ci.yml关于...

    赞

    踩

  • article记录一下PageHelper多数据源分页时的坑_pagehelper.auto-dialect...
    用@bean注入时,以及在双数据源配置那里,配置 PageHelper 分页都是没用的。1、双数据源如果不这样配置分页,...

    赞

    踩

  • articleUnity3D 锚点不能自由移动 Scroll View 里面的子物体不能自由调整_unity中子...
    删除Scroll View上ScrollRect组件指定的Scroll Bar。_unity中子物体的锚点无法改变uni...

    赞

    踩

相关标签
  • signature=bf897cc4aa249a41f839877ed90228f0
  • python
  • linux
  • 开发语言
  • 大数据
  • vue.js
  • 前端
  • javascript
  • elementui
  • webpack
  • vue
  • 前端框架
  • npm
  • typescript
  • eslint
  • auto-import
  • 自动导入组件

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。

  

闽ICP备14008679号