子元素设置position:fixed，z-index大于父元素依然被父元素盖住

在项目中遇到一个奇怪的问题，当父元素样式overflow有滚动条、borde-radius存在、position不为static时，和z-index不为auto时，子元素的position就算是fixed，且z-index大于父元素，也会被隐藏掉。目前发现chrome80+该问题不存在，但是老版本还是有问题。
源码和效果图如下：

其他前端有趣的例子和坑合集：https://github.com/wqhui/blog
直接预览：预览链接

     <style>#father {width: 200px;height: 200px;overflow: auto;border:1px solid blue;border-radius: 20px;position: absolute;z-index: 1;top:40px;
}
#child {background-color: red;width: 300px;height: 300px;position: fixed;z-index: 99999;top:100px;left:100px;
}
</style><div id="father"><p>前几年，高铁运力不足的时候，某些路局为了缓解客流压力，冒着列车超员报警压死弹簧的安全隐患和列车服务设施过量损耗的风险选择发售无座票让人们能早点回家。但是没人理解铁路人的良苦用心，随之引发的就是社会舆论“强烈要求无座票半价”“黑心铁路有座无座一个票价”以及出现无座票旅客霸占有座票旅客座位的现象、无座票旅客霸占一等座、商务座的现象。铁总这下就怒了，干嘛要做这种吃力不讨好的事，加上运力在这几年越来越充足，一纸下文各个路局禁止发售高铁无座票。________各路局情况不一样，有些路局还是会发售少量无座票。著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p><div id="child" class="add-translate"></div></div>

子元素设置position:fixed，z-index大于父元素依然被父元素盖住相关推荐

当子元素设置position absolute的时，父元素必须设置position属性
当子元素设置position absolute的时,父元素必须设置position属性.
关于父元素设置maxHeight或minHeight，子元素高度设置%的不生效的问题
关于父元素设置maxHeight或minHeight,子元素高度设置%的不生效的问题要理解这个问题,首先要搞清楚一个元素的高度是由什么决定的?如果在不额外设置高度或者行高等外加的影响高度的css样式 ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
html随页面移动固定,div设置了position: fixed属性后如何可以做到随浏览器左右移动？...
把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部. 这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题.但问题是当浏览器 ...
不要乱用position:fixed
经常会有一个需求,在一个固定窗口内容滚动,底下有操作按钮需要固定,不随着滚动,一般第一个念头就是用固定定位position: fixed,但是fixed是以窗口为父元素去定位的,这么做肯定是错的,需要 ...
php 上下位置居中,CSS_css中position:fixed实现div在窗口上下左右居中，上下左右居中代码如下复制 - phpStudy...
css中position:fixed实现div在窗口上下左右居中上下左右居中代码如下复制代码代码如下: div{ position:fixed; margin:auto; left:0; ri ...
如何给行内元素设置宽高
我们都知道行内元素直接设置宽高是无效的.当我们在面试中遇到这个问题的时候,很容易想到给它设置 display:block或者display:inline-block就可以了,但是面试官来了句" ...
CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是相对当前浏览器窗口的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
css position fixed 居中,css中position:fixed实现div居中上下左右居中
上下左右居中代码如下 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height ...

子元素设置position:fixed，z-index大于父元素依然被父元素盖住

子元素设置position:fixed，z-index大于父元素依然被父元素盖住相关推荐

最新文章

热门文章