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