CSS定位中z-index层级失效的常见原因分析及解决方案

在我们进行前端切图时，经常会用到层叠顺序的属性z-index，理论上在使用position定位时，z-index的值越大，对应的元素的显示层级越往上。但有时会发现z-index属性的定义并不符合我们预期的情况，今天我们就深入的探究下常见的几种z-index不生效的原因，常见的情形主要有以下几种：

一、元素嵌套，子级的元素z-index大于父级元素。

比如有三个DIV，分别是A、B、C。C嵌套在A里，即，A与B为兄弟元素，A与C为父子关系。 代码如下：

<div class="a">
    A
    <div class="c">C</div>
</div>
<div class="b">B</div>

为了便于观察，我们分别为三个DIV设置了红、绿、橙黄三种不同的颜色，并且设置了不同的top值和left值使其错位显示。对应的CSS样式代码如下：

div{
    width: 200px; height: 200px; padding: 20px; box-sizing: border-box;
    position: fixed; font-size: 30px; color: #fff; text-shadow: 0 0 5px #000;
}
.a{ background: red; top: 10px; left: 10px; z-index: 100;}
.b{ background: blue; top: 80px; left: 110px; z-index: 200;}
.c{ background: orange; top: 150px; left: 50px; z-index: 300;}

默认在不设置z-index属性的时候，三个DIV的层叠顺序其在HTML代码中出现的顺序。

场景一：当A的z-index为100，B为200，C为300。在这种情况下，C是不会覆盖在B上面的，因为C的父级元素A的z-index小于其兄弟元素的z-index的值。

场景二：当A的z-index为300，B为200，C为100。在这种情况下，C是会覆盖在B上面的，因为C的父级元素A的z-index大于其兄弟元素B的值。（此时，A的层级也在B之上），具体显示效果如下图所示。

其实，这些知识点都是我们在学习的时候错过的细节知识，这也就是为什么说CSS入门容易，进阶难的原因了，大部分人只了解了大部分元素、属性的常见用法，遇到稍微复杂一些的场景时，就难以应对了。因此，知识在于积累，尤其编程类的知识更注重的是在实际项目中多写多练。