深入了解 z-index

层叠上下文

上面说到，z-index 默认值 auto 数值上等于0，那设置了 z-index:0 和 默认的 z-index:auto; 有没有区别呢？ 答案是有区别的。区别在于设置了 z-index 属性为整数值(包括0)的元素，自身会创建一个层叠上下文。而创建一个层叠上下文之后，其子元素的层叠顺序就相对于父元素计算，不会与外部元素比较。这样说比较抽象，我们来看个例子。

<div class="dog-container">  <img class="dog" src="http://coding.imweb.io/img/p3/z-index/dog.png" alt="dog"></div><div class="cat-container">  <img class="cat" src="http://coding.imweb.io/img/p3/z-index/cat.png" alt="cat"></div>

img {  width: 200px;}.dog-container {  width: 200px;  height: 100px;  background: red;  position: relative;  z-index: auto; /* 默认值auto */}.dog {  position: absolute;  top: 10px;  left: 100px;  z-index: 2;}.cat {  position: absolute;  top: 80px;  left: 70px;  z-index: 1;}

上面例子中，我们给 .dog 和 .cat 增加了容器 .dog-container 和 .cat-container, 并且 .dog 和 .cat 都设置了 z-index值，所以都显示在红色背景的 .container 之上，而且 .dog z-index 数值比较大，所以显示在上面。

但是当我们设置了 .dog-container 的 z-index 属性值为0之后，我们发现，z-index 值比较大的 .dog 元素反而到 z-index值比较小的 .cat 下面了

.dog-container {  width: 200px;  height: 100px;  background: red;  position: relative;  z-index: 0; /* 将 z-index 值改成0 */}

效果：

其原因就在于我们给 .dog-container 设置了 z-index:0 之后，.dog-container 就创建了自己的层叠上下文，其子元素 .dog在比较层叠顺序的时候只会在 .dog-container 内比较，而不会与外面的 .cat 比较。如下图所示:

上面例子告诉我们，并不是所有情况 z-index 值大的元素都会在上面，我们在进行 z-index 比较的时候要留意其祖先元素有没有建立独立的层叠上下文，z-index 只有在同一个层叠上下文中比较才有意义。另外，对定位元素设置 z-index 属性不是唯一创建层叠上下文的方法，具有下面属性的元素都会创建层叠上下文（具体可参看：层叠上下文 | MDN）：

• 根元素 (HTML)
• z-index 值不为 "auto"的 绝对/相对定位
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex
• opacity 属性值小于 1 的元素
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇文章）
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

也就是说，上面例子中， .dog-container 满足上面任意一条属性，也会一样出现上面的情况。比如设置 opacity 属性：

.dog-container {  width: 200px;  height: 100px;  background: red;  position: relative;  opacity: 0.6; /* 设置 opacity 属性小于1也会创建层叠上下文 */}

效果如下：

总结

1. z-index 属性用于描述定位元素在垂直于页面方向上的排列顺序。
2. z-index 一般比较规则是值大在上，值相同则排后面的在上。
3. 元素在设置了某些属性的时候会创建层叠上下文，z-index 值比较大小只有在同一个层叠上下文才有效。