css z-index值小的覆盖值大的

 

背景：

最近在一个项目中，发现z-index值小的会发覆盖值大的，经过一番研究，z-index的覆盖层级和父级也是有关。

实例：

<div class="father1">
    <div class="father1-child1"></div>
    <div class="father1-child2"></div>
</div>
<div class="father2">
    <div class="father2-child1"></div>
</div>

.father1{
    position:abosolute;
    z-index:2;
    .father1-child1{
        z-index:3;
    }
    .father1-child2{
        z-index:9999;
    }
}
.father2{
    position:abosolute;
    z-index:3;
}

解析：

先说下显示的结果：father2>father1-child2>father1-child1>father1

1.在同父级的下， z-index越大，层级越高，如果同样的值，后面会覆盖前面

2.父级不同z-index，先对比父级的z-index,father2的z-index高于father1，father1子级z-index不管多大都无法覆盖father2

基础知识回顾

通常我们可能会认为 HTML 网页是个二维的平面，因为页面中的文本、图像或者其它元素都是按照一定顺序排列在页面上的，每个元素之间都有一定的间隙，不会重叠。然而，实际的网页其实是三维的，元素之间可能会发生堆叠（重叠），您可以通过 CSS 中的 z-index 属性来设置元素的堆叠顺序，如下图所示：
 

图：元素堆叠演示

每个元素都有一个默认的 z-index 属性，将 z-index 属性与 position 属性相结合可以创建出类似 PhotoShop 中的图层效果。z-index 属性可以设置元素的层叠级别（当元素出现重叠时，该元素在其它元素之上还是之下），拥有更高层叠级别的元素会处于层叠级别较低的元素的前面（或者说上面）。

通过 z-index 属性您可以创建更加复杂的网页布局，z-index 属性的可选值如下表所示：
 

值	描述
auto	默认值，堆叠顺序与父元素相等
number	使用具体数值（整数）设置元素的堆叠顺序
inherit	从父元素继承 z-index 属性的值