z-index是什么意思？

z-index是什么意思？

相信大家在工作中都遇到过这样一些奇怪的现象：

1.为什么我写的z-index没有生效？

2.为什么z-index大的元素却没有盖住z-index小的元素？

3.如何让父元素盖住子元素呢？

以上这些问题都跟CSS层叠上下文有关，OK，带着上面这些问题我们一起来了解一下什么是CSS层叠上下文，以及这些奇怪现象背后的原理！

「如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～」

在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

我们可以这样来理解：

了解了层叠上下文，我们还要知道层叠上下文是如何产生的。

一般来讲有3种方法：

从上面产生层叠上下文的方法，我们可以分为CSS2.1与CSS3两类，在CSS3出来之前，相信大家都看过下面这张图：

看到这张图，相信大家最有疑问的是「行内元素的层叠顺序要高于块级元素与浮动元素」。

OK，有疑问就动手实践一遍，看看是不是真是这样：

这个理解起来其实很简单，像border/background属于装饰元素的属性，浮动和块级元素一般用来页面布局，而内联元素一般都是文字内容，并且网页设计之初最重要的就是文字内容，所以在发生层叠时会优先显示文字内容，保证其不被覆盖。

了解完上面这些内容，现在我们再来看一看前文提到的两个问题

这个很简单，因为它单独使用时不生效，一定要配合定位属性一起，即只对指定了position属性的元素生效——只要不是默认值static，其他的absolute、relative、fixed都可以使z-index生效。(在CSS3之后，弹性元素的子元素也可以生效)

这里我们可以来看一个有趣的现象

这么看还挺正常的，z-index值大的在z-index值小的上方。接下来我们稍微改一改，你就能看到奇怪的现象了

这里我们只是把它们父元素的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是没有任何意义的。

这里很多人是不是认为直接让父元素的z-index大于子元素的z-index不就好了，可事实真是如此吗？

有人是不是又有疑惑了？

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

「其余规则看上面层叠顺序的图即可。」