css层的定位问题--父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动

最新推荐文章于 2022-06-07 11:28:54 发布
最新推荐文章于 2022-06-07 11:28:54 发布
阅读量9.4k 收藏 6
点赞数
分类专栏： css 文章标签： css层的定位问题--overflow造成多级定位层的显示问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34664239/article/details/103513564
版权

话不多说，直接上图看问题

下图是有不符合需求的问题图，整个是个弹框，下拉框是一个ul列表，要的是这个列表在最高层级，但是图中却隐藏在了里面~~
在这里插入图片描述
下图是理想结果
在这里插入图片描述
弹框是fixed定位，列表框外有一个relative定位，列表框是absolute定位，是一个多级定位组成，按理来说，在这种情况下，子元素的层级应该是最高的，那么为什么会出现这种问题呢，经查证，一个小小的属性造成了这一问题overflow: auto;

如果定位元素要想无限制的自由展示，其父元素及祖父元素都不能设置overflow属性，否则会被隐藏掉

baby加油_
关注
专栏目录
子元素绝对定位跟随父元素overflowscroll滚动问题
有问题 ! 请留言 !
07-21 1万+
子元素绝对定位跟随父元素overflowscroll滚动问题 写项目的时候忽然遇到一个问题, 子元素固定定位,父元素设置 overflow:scroll超出部分滚动, 结果固定定位的元素仍然会随着滚动条滚动, 按照原先的理解,父元素内部滚动是不会影响固定定位的元素的 原先代码样例: <div class="box"> <div class="child-1">&lt...
定位及元素的显示和隐藏
m0_53619602的博客
05-27 1259
一、定位 将盒子定在某一个位置 ,所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位由 定位模式+边偏移组成，接下来先来了解定位模式。 1.定位模式 position属性 position属性用于指定一个元素在文档中的定位方式。 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 static静态定位 默认定位方式，无定位的意思。按标准流特性摆放位置，没有边偏移 .
外层元素overflow:auto/scroll导致absolute定位的子元素溢出部分被隐藏
Wind_waving的博客
03-14 1万+
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;bot
父级overflow为scroll时，绝对定位的子元素会被隐藏或一起滚动
yujin0213的博客
01-18 1万+
需求：父级边框固定，里面的内容滚动 由于是图片边框，于是我把边框的上下部分单独切图，中间重复部分平铺 想要的效果图： 一开始的写法： html: div class="paradise-wrap"> div class="paradise">div> div> css: .paradise-wrap{ position: relativ
css隐藏绝对定位元素,父元素overflow-y: scroll; 里面的子元素绝对定位被隐藏。
weixin_30328003的博客
08-03 2466
父级元素overflow-y: scroll; 里面的子元素绝对定位被隐藏。*{margin: 0;padding: 0;}.side{float: right;width: 300px;height: 100%;overflow-y: auto;}.item{position: relative;margin: 10px 0;}.item-hd{background-color: #ccc;fo...
父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
weixin_30586085的博客
10-29 2370
一般情况： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="...
详解CSS 子元素相对于父元素固定定位解决方案
11-19
在CSS布局中，子元素相对于父元素的固定定位是一个常见的需求，这主要涉及到CSS的定位机制，包括绝对定位和相对定位。本篇文章将详细解析如何实现这个目标。 首先，我们来回顾一下绝对定位（absolute）和相对定位...
父元素与子元素之间的margin-top问题(css hack)
09-25
5. **使用绝对定位**：将父元素或子元素设置为绝对定位（`position: absolute`）可以阻止外边距折叠，但会脱离正常的文档流，可能需要调整其他元素的位置。 ```css .box2 { position: absolute; /* 新增 */ top...
css父元素设置了相对定位和overflow：auto之后 子元素设置了绝对定位 子元素定位不能超过父元素本身的宽度 怎么解决
最新发布
09-20
当CSS父元素设置了`position: relative;`和`overflow: auto;`，而子元素使用了`position: absolute;`定位时，如果子元素试图超出父元素的宽度，可能会因为`overflow: auto;`导致的内容滚动而部分不可见。这通常是...
CSS基础----定位与元素的显示与隐藏
你的小甜甜的博客
11-16 351
定位 当我们使用标准流和浮动都不能实现我们想要实现的布局时,我们就可以采用定位 浮动可以让多个块级盒子一行显示并且没有缝隙,用于我们横向的排列盒子,而定位则是让盒子自由的在某个盒子内的任意位置,或者固定在屏幕的某个位置,压住其他盒子, 定位=定位模式+边偏移,其中定位模式就是一个元素在文档中的定位方式,边偏移来决定该元素在文档中的最终位置 CSS中的定位是由position属性来设置的 定位模式 static: 静态定位,元素默认的定位方式,没有定位的意思,采用标准流的特性来拜访元素,一般用到的地方比较少
overflow 与 position定位之间的影响
hd07220的博客
12-07 2375
绝对定位元素不总是被父级 overflow 属性裁剪，尤其当 overflow 在绝对定位元素及其包含块之间的时候。 overflow 元素同时也是定位元素时，绝对定位的子元素会被裁切； overflow 元素和绝对定位元素之间有定位元素（relative），也会被裁切； 中间不论隔多少层，只要不存在定位元素，那个定位祖先的 overflow 始终可以裁切 absolute 子元素，即使中间元素也添加了 overflow，也只会被定位祖先裁切 ...
解决CSS中由于overflow导致子元素绝对定位错误
weixin_44557473的博客
04-19 3682
由于父元素设置overflow属性导致子元素绝对定位错误
祖父元素中设置overflow:auto,子元素设置position:absolute会随着滚动条滚动，而不能浮动到元素上
miin_ying的博客
06-07 780
css
el-dialog窗口中绝对定位子元素被遮挡问题解决
hahahahha111的博客
01-21 2461
el-dialog窗口中绝对定位子元素被遮挡问题解决 1.背景：el-dialog中使用了表单，表单校验信息不采用显示在输入框下方的方式，而是自定义一个组件来显示在标签上方（类似el-poppver），其使用了绝对定位； 2.现象：第一行表单元素（两个输入框，标签位置为top），当校验信息(显示于标签之上)为换行显示时，好像被el-dialog__header遮挡了，不能显示完全，因此力求可以显示完整的方法； 3.探索之路：网上搜解决绝对定位div子元素被遮挡的方法，均是父元素层级太低或父元素未设置posi
父元素overflow:hidden对子元素的影响
这个昵称没有被占用吧的博客
09-12 4860
结论：如果这个父元素是body，则子元素不受影响；如果这个父元素是body之外的其他元素，则子元素会受overflow:hidden;的影响，即，子元素超出父元素部分会被隐藏。 如： &lt;style&gt; body { width: 50px; height: 50px; overflow: hidden; bo...
解决overflow:hidden与定位一起使用子元素定位后元素被裁剪，隐藏不见问题
热门推荐
marendu的博客
06-16 2万+
示例如下： <body> <div class="b"> b <div class="c"> c </div> </div> </body> //css <style> .b{ position: absolute; width: 300px; height: 300px; backgrou
当父元素设置为overflow：auto时，后代position：absolute的元素依然会把父元素撑开...
weixin_30815427的博客
09-07 2504
当父元素设置为overflow：auto时，后代position：absolute的元素依然会把父元素撑开。如下图，下拉框的定位是absolute。 去掉父元素overflow：auto后显示 等待解决办法！！！！！！！！ 转载于:https://www.cnblogs.com/xwtcm/p/7489656.html...
absolute绝对定位的元素显示不出来的可能原因
hzxOnlineOk的博客
08-07 1万+
在父元素position: relative相对定位后 对子元素position: absolute绝对定位，如果没有指定width，会显示空白，当然，如果同时设置left和right，相当于会默认计算一个width，所以也可以正常显示 <View style={{ position: 'absolute', width: '100%', left: 0, // r
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值