为什么我写的z-index不生效？( 三 ) _生活百科

<div style="position:relative; z-index:0;"> <div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div></div>?<div style="position:relative; z-index:0;"> <div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div></div>

文章插图
这里我们只是把它们父元素的z-index属性从auto改成了0，两种情况的表现却截然相反。
产生这种现象的原因我们也能够从上面的理论中找到答案：position属性为非 static值并设置z-index属性为具体数值才能产生层叠上下文
当z-index为auto时，是一个普通元素，两个box层比较不受父级的影响，按照规则谁大谁上，于是z-index为2的box覆盖值为1的box；当z-index为0时，会创建一个层叠上下文，此时的层叠规则就发生了变化。层叠上下文特性里最后一条规则，每个层叠上下文都是独立的。两个box的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。由于两者z-index都是0，所以，遵循层叠规则后来居上，根据在DOM出现的先后顺序决定谁在上面，于是，位于后面的box2覆盖box1 。此时box元素上的z-index是没有任何意义的。
3.如何让父元素盖住子元素？这里很多人是不是认为直接让父元素的z-index大于子元素的z-index不就好了，可事实真是如此吗？

<style>.outer {    position: relative;    width: 100px;    height: 200px;    background: salmon;    z-index: 3;}  .inner {    position: relative;    width: 50px;    height: 200px;    background: cadetblue;    z-index: 1;}</style><div class="outer">父元素  <div class="inner">子元素</div></div>

文章插图
有人是不是又有疑惑了？
我们这样来理解，父元素定位+z-index为数值，所以它产生了一个层叠上下文，此时子元素无论怎么设置z-index都不可能在父元素的下方。唯一可以实现的方法是将子元素的z-index设为负值，而父元素只要不产生层叠上下文就可以了。

<style>.outer {    position: relative;    width: 100px;    height: 200px;    background: salmon;    /**z-index: 3;**/}  .inner {    position: relative;    width: 50px;    height: 200px;    background: cadetblue;    z-index: -1;}</style><div class="outer">父元素  <div class="inner">子元素</div></div>