原创 2021-05-06 16:26:43

身为一个假的前端,总是感觉调试页面非常的困难。前两天在调试网页右边的悬浮菜单的时候发现二级菜单被其他的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,希望可以给大家帮助~~

 

 

 


 

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

延伸阅读
  1. layui tree组件 回显bug(只要勾选一个子集在回显的时候会勾选全部子集)
发表评论