原创
2021-05-06 16:26:43
摘要:作为一个假的前端,调试页面是非常困难的。在我调试页面的时候我发现一个挺有意思的问题,右侧通过position:fixed;定位的菜单,二级菜单总是被覆盖掉,改变其z-index值也总是无效,最终将问题原因,与原理记录下来,希望可以给大家带来帮助吧~
身为一个假的前端,总是感觉调试页面非常的困难。前两天在调试网页右边的悬浮菜单的时候发现二级菜单被其他的html页面覆盖了,无论怎么调高他的z-index属性都无法解决这个问题。
查阅了资料,原来谷歌浏览器在设置position:fixed;后会触发元素创建一个新的层叠上下文,并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构,当给b设置了position:fixed;属性后,会触发创建一个新的层叠上下文,它的父层叠上下文变成了a,所以b只能在a的内部进行层叠比较。这也就是大家熟听的“从父原则”。
为了验证从父原则,写了如下demo
html
<div class="demo1">
<div class="demo1-1">
</div>
</div>
<div class="demo2">
</div>
css
.demo1{
position:fixed;
top:0px;
width:100%;
height:100px;
background-color:red;
z-index:0;
}
.demo1 .demo1-1{
position:fixed;
top:50px;
left:100px;
width:100px;
height:100px;
background-color: yellow;
z-index:100;
}
.demo2{
position: fixed;
top:100px;
width:100%;
height:100px;
background-color: blue;
z-index:1;
}
结果如图所示:

结果很明确,虽然黄色方块的z-index属性设置为100,但是最终决定层级的是作为父级的红色长方形区域的z-index属性与蓝色长方形区域的z-index属性的大小;
红(0)< 蓝(1),所以黄色块被蓝色块压住。
为了验证是否正确,我们对各个div的z-index属性做出修改,红z-index修改为2,蓝(z-index)修改为1,黄z-index修改为0,结果如图:

此结果,正是我们所预测的,为了更方便以后的查阅,我做了如下demo,希望可以给大家帮助~~
非特殊说明,本文版权归zhsare个人博客 所有,转载请注明出处.