什么是 CSS 层叠上下文，它们是如何工作的？

CSS层叠上下文给很多开发者都带来过困扰。在我写完《CSS Master》中的布局章节之前，我都不能说自己已经完全理解了它们。当然了，我理解元素的 z-index 属性是需要 position 属性不为 static 时才能生效的，但这也是在我读了无数次Philip Walton 的《没有人告诉你关于 Z-Index 的一些事》之后才理解了。

没有冒犯 Philip 的意思。就像我说过的：层叠上下文很棘手。

那什么是层叠上下文呢？层叠上下文就是一个包含了一组堆叠层的元素。这可以是一个 html 元素创建的根层叠上下文，或者是一个由特定属性和值创建的局部层叠上下文。

“包含一堆层”是一个很奇怪的短语，但这是一个简单的概念。在一个局部层叠上下文中，子元素的z-index 会根据其父元素来设置而不是文档的根元素。在该上下文以外的层（例如：一个局域层叠上下文的相邻同级元素）不能位于其内部层之间。

这儿是一个例子。使用切换按钮来为 A 元素触发或者取消一个局域层叠上下文。

在这个例子中，#a p 元素(A的子元素) 的z-index为1 ，#a 元素和 #b 元素的z-index值为auto 。因为 #a p 元素的 z-index 属性值为正数，所以在根层叠上下文内该元素位于 #a 元素和 #b 元素之上。

然而把 #a 元素的 transform 属性值由 none 改为 scale(1) 会触发一个局域层叠上下文。现在 #a p 元素的 z-index 值会根据 #a 元素来计算而不是文档的根元素。

无论是根层叠上下文还是局域层叠上下文都会遵循一系列的规则来确定元素的堆叠和绘制顺序，一个层叠上下文的子元素会按照从下到上的顺序绘制。

1. 堆叠层级为负数的元素，通常为 z-index:-1 的元素 。2. position 属性值为 static 的元素。3. 堆叠层级为 0 的元素，通常为 z-index:auto 的元素。4. 堆叠层级为正数的元素，例如 z-index 属性值为 1 或者更大的元素。

如果两个元素有相同的堆叠层级，就按照它们在源文件中出现的顺序层叠。后继元素堆叠在前驱元素之上。

少数的 CSS 属性和值会触发一个新的层叠上下文。它们包含: opacity 属性，当它的属性值小于 1 时（例如：.99)；filter 属性，当它的属性值不为 none 时；CSS 混合模式属性 mix-blend-mode, 当它的属性值不为 normal 时。

和你猜想的一样，transform 属性能够触发一个层叠上下文，但是仅当它的属性值不为 none 时。这包含了身份转换[1] ,例如属性值为 scale(1) 和 translate3d(0,0,0) 。

在上述例子中，#a 元素和 #b 元素拥有相同的堆叠层级，但是 #b 元素是源文件中的第二个元素。当 transform: scale(1) 被应用时， #a p 变为包含在 #a 元素的局部上下文中。结果是，#b 元素上升到了堆栈的最上面。

[1] 身份转换对元素没有视觉上的影响，但是会触发一个新的层叠上下文。

关于作者：Eric.M.Y.H

前端攻城狮，曾游学于大英及大印度斯坦，学习CS课程，略懂自然语言处理 个人主页 · 我的文章 · 17 ·