CSS 堆叠上下文

一、什么是堆叠上下文

---

堆叠上下文(stacking context)是 HTML 中的一个三维的概念。这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

可以把堆叠上下文理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。

满足以下任意一个条件的元素都会形成堆叠上下文

• 根元素 (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"的元素

二、堆叠顺序

---

堆叠顺序(stacking order)表示元素发生堆叠时候有着特定的垂直显示顺序，这里的堆叠顺序是一种规则。

我们通过一个设计实验可以清楚地观察元素的堆叠顺序是怎样的
http://js.jirengu.com/hihibamude/1/edit?html,css,output

通过实验得出下图

堆叠顺序

从上图中可以看出

z-index: - < background < border < 块级 < 浮动 < 内联 < z-index: 0（z-index: auto） < z-index: +

注意：

• 这是在没有出现堆叠上下文的情况下的默认顺序
• z-index:0 和z-index:auto单纯从层叠水平上看，是可以看成是一样的。但实际上，两者在层叠上下文领域有着根本性的差异。差别就在于，z-index:0所在的元素是层叠上下文元素，而z-index:auto所在的元素是一个普通的元素。
  
  
  应牢记的堆叠顺序准则

1. 谁大谁上：当具有明显的堆叠水平标示的时候，如识别的z-indx值，在同一个堆叠上下文领域，堆叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
2. 后来居上：当元素的堆叠水平一致、堆叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。

三、堆叠上下文对 z-index 的影响

---

我们直接从一个例子来看堆叠上下文是如何影响 z-index 的，同时我们可以把堆叠上下文当成一个“部门”来理解

HTML

  
a
    
a1
  
  
b
    
b1
  

CSS

.parent{
  height: 200px;
  border: 10px solid rgba(255,0,0, 1);
  padding: 15px;
  margin: 12px;
  background: #000;
}
.relative{
  width: 100px;
  height: 100px;
  background: orange;
  position: relative;
  border: 1px solid red;
}
.a1,.b1{
  background: green;
}
.b1{
  background: blue;
  margin-top: -90px;
}

此时页面中只有一个堆叠上下文元素，那就是 HTML 元素，且 a1 和 b1 都是块级元素，遵循“后来居上”的规则，因此 b1 会盖住 a1。

image.png

理解：a1 和 b1 就是在 HTML 这个大的部门下工作的员工，同级别的情况下就遵循“后来居上”的规则

---

然后我们把 a1 和 b1 都变为堆叠上下文元素

.a1,.b1{
  background: green;
  position: relative;
}
.a1{
  z-index: 2;
}
.b1{
  background: blue;
  margin-top: -90px;
  z-index: 0;
}

且此时 a1 的 z-index 高于 b1，出现 a1 盖住 b1。

image.png

理解：这相当于员工 a1 升官了，级别自然比员工 b2 高，所以就跑到了 b2 的头上

---

上面的两种情况都很好理解，下面有一种特殊的情况

.a1,.b1{
  background: green;
  position: relative;
}
.a1{
  z-index: 2;
}
.b1{
  background: blue;
  margin-top: -90px;
  z-index: 0;
}
.a{
  position: relative;
  z-index: 1;
}
.b{
  position: relative;
  z-index: 2;
}

当我们把 a1 和 b1 的父元素都变为堆叠上下文元素的时候，却发现此时 z-index 为 2 的 a1 被盖在了 z-index 为 0 的 b1 下面？？？

image.png

这就属于堆叠上下文改变 z-index 的情况了

理解：在 HTML 这个大部门中，员工 a1 和 b1 又分别被分到了两个小部门 a 和 b 中，部门 b 的等级比部门 a 的等级高。因此即便是 a1 单个的等级高于 b1，但整体来看部门 b 的等级高于 a ，就算是 b 里面等级最低的员工也要比 a 里面等级最高的员工等级高。

完整代码：http://js.jirengu.com/tuwuyaneza/1/edit?html,css,output

四、总结

---

1. 堆叠上下文是一个很模糊的概念，我们并不能说清楚它到底是什么，我们只知道有哪些属性会触发堆叠上下文
2. 可以通过设计实验来说明堆叠顺序
3. 堆叠顺序：
   z-index: - < background < border < 块级 < 浮动 < 内联 < z-index: 0（z-index: auto） < z-index: +
4. 堆叠顺序准则：谁大谁上，后来居上
5. 堆叠上下文会影响 z-index

参考：
深入理解CSS中的层叠上下文和层叠顺序——张鑫旭
层叠上下文——MDN