细读 CSS | 层叠上下文

配图源自 Freepik

一、概念

在 HTML 页面中，我们通常会使用 margin、float、offset 等 CSS 属性控制元素在 X 轴和 Y 轴页面中的位置，另外会使用 z-index 和 transform 来控制元素在 Z 轴的排列顺序。

因此，我们可以得知 HTML 页面其实是一个三维的结构。

了解以下这几个词：

层叠上下文（Stacking Context）

层叠上下文是一个比较抽象的概念。当一个元素拥有了一个“三维”的表现，即在 Z 轴上有一定的顺序，那么我们称该元素有一个层叠上下文。

层叠等级（Stacking Level）

有了层叠上下文之后，需要一个叫做层叠等级（层叠水平）的家伙来决定同一个层叠上下文中元素在 Z 轴上的显示顺序。

层叠顺序（Stacking Order）

层叠顺序是一种用于描述层叠等级的特定规则。

如何区分？

层叠上下文和层叠等级是概念，而层叠顺序是规则。通俗地讲，前两者就像是公司和领导，负责画饼和制定计划，而后者则是打工人，负责具体实施（就是搬砖）。

二、重点

本文术语约定

本文中所提到的“层叠元素”和“定位元素”均按以下描述进行约定，有特殊说明除外。

层叠元素：指含有层叠上下文的元素（主要用于区别不含层叠上下文的普通元素）。
定位元素：指含有 position 属性，且其值不为 static 的元素。

注意点

普通元素的层叠等级优先由层叠上下文决定。
层叠顺序的比较，只有在同一层叠上下文中进行对比才有意义。
所有元素（普通元素、层叠元素）都存在层叠等级。请不要将层叠等级和 CSS 中的 z-index 属性混为一谈，尽管 z-index 在某些情况下会影响到层叠等级。

层叠上下文的特性

层叠元素有以下特性：

层叠元素的层叠等级要比普通元素高。
层叠上下文可以阻断元素的混合模式。
层叠上下文可嵌套，内部层叠上下文及其所有子元素均受限于外部的层叠上下文。
每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素即可。
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素都被认为是在父层叠上下文的层叠顺序中。

创建层叠上下文

以下几种方式，都会创建层叠上下文：

根层叠上下文页面的根元素 <html> 自带一个层叠上下文。我们知道，绝对定位元素通过 top/right/bottom/left 来定位时，若没有其他定位元素限制，会相对浏览器窗口定位。其中缘由，就是因为有根层叠上下文的原因。
定位元素层叠上下文（传统）当元素的 position 不为 static，z-index 不为 auto 时，该元素就会创建层叠上下文（但有些特例，下文会提到）。
CSS3层叠上下文（新时代）在 CSS3 中新增了很多新属性，有一些会创建层叠上下文。
1. z-index 值不为 auto 的 flex 项（父元素 display:flex|inline-flex）；
2. 元素的 opacity 值不为 1；
3. 元素的 transform 值不为 none；
4. 元素 mix-blend-mode 值不为 normal；
5. 元素的 filter 值不为 none；
6. 元素的 isolation 值为 isolate；
7. will-change 指定的属性值为上面任意一个；
8. 元素的 -webkit-overflow-scrolling 设为 touch。

特例说明

在远古神兽 IE5/6/7 浏览器下，z-index: auto 会创建层叠上下文。至于这是 Bug 还是微软故意为之，就不去考究了，反正也接触不到这些远古神兽了。在现代浏览器（包括 IE8 及以上）中，z-index: auto 都不会创建层叠上下文。

在过去 position: relative | absolute | fixed 都需要配合 z-index（数值）才会创建新的层叠上下文。但是不知道什么时候起，Chrome、Firefox、Safari、Edge 等浏览器，position: fixed | sticky 元素天然层叠上下文，无需 z-index 为数值。（2022.01 亲测）

层叠上下文与层叠顺序

一旦普通元素具有了层叠上下文，其层叠顺序就会变高。

分为两种情况：

如果层叠元素不依赖 z-index，那么其层叠顺序看成与 z-index: auto 一致的 z-index: 0 级别。

如果层叠元素依赖 z-index，那么其层叠顺序由 z-index 决定。

*张鑫旭大佬原图出处，请看这里。

Q：为什么定位元素会层叠在普通元素的上面？

当一个元素成为了定位元素，z-index 会自动生效，取其默认值 auto。根据层叠顺序图，我们可以看到 z-index: auto 的层叠顺序比 block、float、inline/inline-block 都要高。

层叠准则

当元素发生层叠时，其覆盖关系遵循以下两个准则：

谁大谁上：在同一层叠上下文中，层叠等级较大的会覆盖较小的。

后来居上：在同一层叠上下文中，若层叠等级（顺序）相同时，在 DOM 文档流中处于后面的元素会覆盖前面的元素。

请注意，上面两条准则的前提都是“处于同一层叠上下文中”，那是因为在不同层叠上下文的比较是没有意义的。

接下来，介绍一些常见的层叠上下文、层叠顺序的案例，帮助进一步理解。

三、position 与 z-index

它们取值如下：

position: static(default) | relative | absolute | fixed | sticky

z-index: auto(default) | <integer> | inherit

当 position 不为 static 时，z-index 才会生效。

其中 z-index 属性值如下：

Value	Description
auto	将层叠水平设为 `0`，且不会创建新的层叠上下文（默认值）。
inherit	将层叠水平设为与父元素相同，且不会创建新的层叠上下文。
	将层叠水平设为对应（正负）整数，并会创建新的层叠上下文。

*其实还有一些全局值（如 initial、unset），但不重要，故忽略。

请注意，在 CSS3 里当父元素设为 display: flex | inline-flex，子元素使用 z-index 时，也会使得子元素创建新的层叠上下文（请注意：创建新的层叠上下文是子元素，而不是父元素哦）。

换句话说，z-index 不再是定位元素独享，它还可以与 flex 搞在一起做点什么。

基础示例一 👉 源码及演示

基础示例二 👉 源码及演示

以上两个示例都很基础，不多说了...

小结

若 position 为 static 时，top、right、bottom、left 和 z-index 属性均无效。

当 z-index 生效时，层叠顺序表现为：-integer < auto/0 < +integer。

仅层叠顺序而言，z-index: auto 和 z-index: 0 表现是一致，都是 0 级别。但两者在层叠上下文领域有着根本性的差异，前者不会创建新的层叠上下文，而后者会创建新的层叠上下文。

即使不显式设置 z-index，定位元素的层叠顺序也会比普通元素高。

验证 z-index: auto 和 z-index: 0 的层叠顺序是相同的

👉 源码及演示

从结果上看，可以知道：

层叠顺序 z-index: -1 < z-index: auto | z-index: 0 < z-index: 1，且 z-index: auto 和 z-index: 0 层叠顺序均为 0 级别。

当 z-index: auto 和 z-index: 0 的定位元素同时存在，发生层叠时，在 DOM 流中处于后面的元素会覆盖前面的元素（同一层叠上下文中）。

请记住：处于同一层叠上下文中，遵循谁大谁上、后来居上的准则。

验证 z-index: auto 不会创建层叠上下文

👉 源码及演示

图中示例的区别在于 inner 盒子外层的 outer 盒子，一个设为 z-index: auto，另一个设为 z-index: 0。

假设 z-index: auto 会使得元素本身创建新的层叠上下文，那么 inner1 和 inner2 对应的参照物分别是 outer1 和 outer2，此时 inner1 中的 z-index 值，其实是没有意义的，无论它的值是正数、负数、还是 0 或 auto，它总会显示在 outer1 上面（inner2 同理）。同时，由于 outer1 和 outer2 的层叠顺序是一致的，outer2 在 DOM 流后面，属于“后来居上”，因此 outer2 会覆盖 outer1。

倘若假设成立，蓝色块应覆盖在绿色块上面（效果应如示例二相同），可事实并非如此。因此，我们可以得出结论：z-index: auto 并不会创建新的层叠上下文。

给你们看看远古神兽 IE5/6/7 浏览器下，z-index: auto 创建层叠上下文的效果。

Internet Explorer 7

因此，较为严谨的说法是：在现代浏览器（包括 IE8 及以上浏览器）中，z-index: auto 不会创建层叠上下文。

关于 z-index 负值时而有效，时而无效的问题

👉 源码及演示

究其原因，其实很简单，前面也提到过。比较层叠顺序时，应在同一层叠上文中进行对比，否则是无意义的。

在示例一，red 盒子和 green 盒子处于同一层叠上下文（即根层叠上下文）中，且 z-index: -1 层叠顺序较低，所以可以看到 red 盒子覆盖了 green 盒子。

在示例二，由于 red 盒子的 z-index: 0 是使得其本身创建了新的层叠上下文，所以 green 永远不会穿越 red 盒子。此时，即使 green 盒子的 z-index 为 -9999 也总会显示在 red 盒子上层。

在示例三中，red 盒子内多了一个 blue 盒子，并设为 z-index: 1。由于 blue 盒子和 green 盒子同属于 red 盒子创建的层叠上下文，因而，此时 z-index 就有了比较的意义了。所以，我们可以看到 green 盒子处于 blue 盒子下方，且不会穿过 red 盒子。

再看另外一个示例 👉 源码及演示

它的原因是一样的，因为除了 z-index 会创建层叠上下文之外，CSS3 中的 transform 也会创建新的层叠上下文哦！

以上两个都是常见的 z-index “失效”的场景，根本原因还是，有的小伙伴不知道 transform 也会创建层叠上下文。

当遇到 z-index 失效时，Check List 如下：

检查当前元素是否为定位元素，或其父级元素是否有 display: flex | inline-flex；

检查它们是否处于同一层叠上下文；

若前面条件都确认无疑，那说明有一些你不知道的 CSS 属性会创建层叠上下文（此时应去翻阅文档）；

否则，就是这垃圾浏览器没有遵循标准，偷偷地创建了新的层叠上下文（这种情况应该几乎不会出现，毕竟微软都放弃 IE 转投 Chromium 了）。

关于 position: fixed | sticky 自带层叠上下文

👉 源码及演示

于 2022.01 亲测，Chrome 97、Safari 15.2、Firefox 97、Microsoft Edge 97 浏览器下面，表现均如上图。由于 position: fixed | sticky 自带层叠上下文，因此图中示例三、示例四蓝色块会覆盖绿色块。

四、transform

在 CSS3 中有几个与动画相关的属性：transform、transition、animation 分别对应变换、过渡、动画。虽意义相近，但具体角色不一。它们的取值如下：

.selector {
  transform: transform-function | none;
  transition: property duration timing-function delay;
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

本文重点并非谈谈它们的区别，我们接着看 transform。与之相关的 CSS 属性有这些：

.selector {
  /* 设置元素变形方式，如旋转、缩放、倾斜、平移等 */
  transform: transform-function | none;

  /* 更改一个元素变形的原点 */
  transform-origin: <length> | <percentage> | center | left | right | top | bottom;

  /* 定义与 transform、transform-origin 这两个属性有关联的布局框 */
  transform-box: content-box | border-box | fill-box | stroke-box | view-box;

  /* 设置元素的子元素是位于平面中，还是 3D 空间中 */
  transform-style: flat | preserve-3d;
}

它还有兼容性属性：

.selector {
  -webkit-transform: transform-function | none;
  -moz-transform: transform-function | none;
  -ms-transform: transform-function | none;
  -o-transform: transform-function | none;
  transform: transform-function | none;
}

其中 transform-function 的变换函数有以下这些：

透视：perspective()（查看示例）
矩阵：matrix()、matrix3d()（查看示例）
倾斜：skew()、skewX()、skewY()（查看示例）
缩放：scale()、scaleX()、scaleY()、scaleZ()、scale3d()（查看示例）
旋转：rotate()、rotateX()、rotateY()、rotateZ()、rotate3d()（查看示例）
平移：translate()、translateX()、translateY()、translateZ()、translate3d()（查看示例）

我们知道，只要 transform 不为 none 时，它也会创建层叠上下文。还有 translateZ()、perspective() 两个变换函数，可以实现 z-index 类似的效果。translateZ(tz) 就是 translate3d(0, 0, tz) 简写形式。

transform-style 与 translateZ

从字面上看，我们可以很容易知道，translateZ 的变换是属于 3D 空间的。

先看个简单示例：

为什么红色块的 translateZ 值更大，但却不是在更上面呢？

原因很简单，就是因为 transform-style 的默认值是 flat，即处于 2D 平面中。如果选择平面，元素的子元素将不会有 3D 的遮挡关系。

它的取值有：

transform-style: flat | preserve-3d

只要将其添加一个 transform-style: preserve-3d 的父元素，就能得到预期结果：红色覆盖在绿色上面。preserve-3d 使得该元素的子元素应位于 3D 空间中。

再看示例 👉 源码及演示

以上示例多组对比，其实还是为了说明：在不同层叠上下文中比较层叠高低是没有意义的。

Transform 和 z-index 同时使用，会产生什么问题呢？

看示例 👉 源码及演示

我们来看下 iPhone 微信浏览器下，表现如何：

微信浏览器 iOS 版

看到差异了吗？

原因是，苹果旗下的 Safari 浏览器在使用 3D 变换时，会忽略 z-index 的作用。

详情戳这里：Safari 3D transform 变换 z-index 层级渲染异常的研究

个人建议

尽量不要同时使用 translateZ() 和 z-index，iOS 与 Android 下表现有差异；

在涉及 3D 变换时，应采用 transform-style: preserve-3d、transform: translateZ()、transform: perspective 的方案，而不是 z-index；

未完待续...

toFrankie / blog