Stacking Context - DOM元素的层级关系

不是z-index越大的元素越在上层

通过z-index来控制层级是很常见的前端需求，

但是你是否遇到过，无论z-index设置多大，仍然无法将一个元素移到最上层的情况？

这是因为z-index依赖于一个抽象的概念：Stacking Context

Stacking Context是什么？

stacking context是层叠上下文，决定了DOM元素上下层级关系

Stacking Context的根元素

每个层叠上下文都由一个元素创建，这个元素被称为stacking context的根元素

什么情况会创建Stacking Context？

• html根元素
• fixed定位的元素
• 其他任何z-index不是默认值auto的元素（z-index=0也会创建层叠上下文）
• CSS
  • 有透明度的元素：opacity<1
  • 有二维/三维变幻的元素：transform不为none，或者will-change
  • 有滤镜的元素：filter不为none
  • isolation: isolate;：创建一个新的堆叠上下文，隔离混合效果

Stacking Context之间的层级顺序

• 对于同级（根元素是兄弟元素）的stacking context，层级由z-index值决定，z-index大的在上层；
• 同级stacking context如果z-index相同，由DOM中出现的顺序决定，出现晚的在上层；
• 对于嵌套的stacking context，子stacking context在上层；

Stacking Context内部层级顺序

• 最底层：元素的背景色、背景图、边框
• 子元素由底层到顶层的顺序：
  • z-index<0的元素
  • 块级盒子
  • 浮动盒子
  • 内联盒子
  • z-index：0或auto的定位盒子
  • z-index>0的元素

例子🌰

DOM结构：

div1
div2
div3
	-> div4
	-> div5
	-> div6

最终的层级顺序：

一个有用的浏览器扩展：CSS Stacking Context inspector

这个扩展在浏览器devtools中列出了网页上的stacking context。在遇到z-index和层级问题时，可以让我们更快的定位问题。

本篇文章使用Notion创作，由我的自动化工具从Notion同步。