嵌套Fixed定位元素,被嵌套的元素层级异常或失效

最近发现一个问题,Fixed定位元素嵌套会引发被嵌套的元素层级异常或失效。具体说明如下:

有这样一个布局:

<style>
.container4{width:100%;height:200px;background-color:cyan;position: fixed;z-index: 1;}
.container5{position: fixed;width:100%;height:100%;background: blue;z-index: 99;}
.container6{position: relative;width:100%;height:300px;background-color:rgba(100,0,100,1);z-index: 2;}
</style>
<div id="container4" class="container4">ddd
  <div id="container5" class="container5">eee</div>
</div>
<div id="container6" class="container6">fff</div>

container4,5都是fixed的元素,问题出现在当container6是一个定位元素时,如果层级大于或等于container4的层级,那么不管container5的层级多大,都会被container6挡住。

处理办法就是:去掉嵌套。fixed元素平级去比划,带个老爹就会累赘,哈哈!

作者:张雪飞
出处:https://zhangxuefei.site/p/1628
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注