一、示例分析
z-index是堆叠层的比较值，这里的堆叠层不是完全我们传统意义上看到的div嵌套层级。基于下面基本规则：
只针对position:absolute、relative（包括有float的）的块级元素可以设置z-index。未设置position或者设置了position:static的，即使设置了z-index也是没有作用的，所以可以忽略。设置了z-index就会创建堆叠层（z-index:auto除外；如果全部没有设置body会创建一个堆叠层）。
简单来说：忽略未设置z-index的层级（忽略这些代码来看），对比“兄弟”层级的z-index值大小。
<html>
<head>
</head>
<style>
body {
margin: 0;
}
</style>
<body>
<div style=" width: 700px;height: 700px;background: red;">
<div style="width: 300px;height: 300px;background: green;position: absolute;top: 0px;left: 0px;z-index: 200;">
</div>
<div style="width: 400px;height: 400px;background: yellow;position: absolute;top: 0px;left: 0px;z-index: 150;">
</div>
<div style="width: 550px;height: 550px;background: blue;position: absolute;top: 0px;left: 0px;">
<div style="width: 500px;height: 500px;background: black;position: absolute;top: 0px;left: 0px;z-index: 120;">
</div>
</div>
</div>
<div style="width: 600px;height: 600px;background: pink; position: absolute;top: 0;z-index: 100;">
</div>
</body>
</html>这是示例代码设置120的效果图。
如上代码，background:black的，分别修改z-index：80、180看看效果。直接根据各自的z-index看得到效果。black和pink是会有z-index比较和影响效果的。验证证明，black和其他的z-index都有影响，虽然他们不是传统意义上div嵌套的兄弟关系。下面设置80的效果图：
这是180的效果图：
二、总结：
上图中的上半部分，我们定位为一个堆叠，每个设置了z-index的div是一个堆叠层，就像是一个可以插卡片的盒子一样，盒子是堆叠，卡片是堆叠层。
忽略未设置z-index的，兄弟堆叠层按照上图的上半部分的z-index大小在堆叠中排列；忽略掉的z-index一起聚集在z-index:auto位置。如示例中的background: red和background: blue是上图中的z-index:auto；对于有z-index的有子集的，又会在此层内创建一个堆叠层，形象地理解即是卡片盒的卡片也是一个盒子。
1、z-index:0也会创建堆叠层，z-index:auto不会，上面的示例，将background: blue的设置z-index:0，如论怎么设置background: black的z-index的正数多大，也不会显示在上面了。下图是设置z-index：0的效果：
2、要想设置子div被父div覆盖，只有父级不设置z-index（或设置成auto，不能设置0），并且设置子div为负数。
解析：去掉父级的z-index，子节点就回到了上一个堆叠中，并且子节点回到上图中的z-index:-n中，当然就在下面了；如果z-index还是保留z-index，就是上面的“创建子堆叠层放大”效果图中的，不管父级z-index是设置正数还是父数，子元素都是在他的上面建的。
2、分析时忽略掉没有z-index的div（未设置position或者设置了position:static的，即使设置了z-index也是没有作用的，所以可以忽略），同一层级（不是传统理解的div的嵌套层级，而是在同一个堆叠中的，即忽略掉那些没有设置z-index的div）的，然后比较看z-index哪个大哪个就在上面。
3、一旦设置z-index，就会创建堆叠层（未设置position或者设置了position:static的，即使设置了z-index也是没有作用的，所以可以忽略）。在有设置z-index的div再设置子div的z-index，即在堆叠层内创建堆叠层。
换句话说：如果父级的z-index小在下层，里面的子元素设置再大的z-index也不会显示在父级z-index大的元素上面。
5594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
