【CSS】层叠上下文

[swiftwind0405]

定义

层叠上下文

层叠上下文，英文称作”stacking context”，是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

层叠水平

“层叠水平”英文称作 ”stacking level” ，决定了同一个层叠上下文中元素在 z 轴上的显示顺序。

遵循”后来居上“和”谁大谁上“的层叠准则。

普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。

层叠顺序

“层叠顺序”英文称作 ”stacking order”。表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里跟上面两个不一样，上面的层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。

在不考虑CSS3的情况下，当元素发生层叠时，层叠顺讯遵循上面途中的规则。
这里值得注意的是：

1. 左上角 "层叠上下文background/border" 指的是层叠上下文元素的背景和边框。
2. inline / inline-block 元素的层叠顺序要高于 block (块级)/ float (浮动)元素。
3. 如果层叠上下文元素不依赖z-index 值，z-index: auto 可看成 z-index: 0 级别。而如果层叠上下文元素依赖 z-index 值，其层叠顺序由 z-index 值决定。

z-index与层叠上下文：

1. 定位元素默认 z-index: auto 可以看成是 z-index: 0
2. z-index 不为 auto 的定位元素创建层叠上下文
3. z-index 层叠顺序的比较止步于父级层叠上下文

如何创建层叠上下文

• 页面根元素天生具有层叠上下文，称为”根层叠上下文“
• 普通元素设置 position 属性为非 static 值并设置 z-index 属性为具体数值，产生层叠上下文
• CSS3 中的新属性也可以产生层叠上下文

CSS3 中的属性对层叠上下文的影响

1. 父元素的 display 属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
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

层叠上下文的特性

• 层叠上下文可以嵌套，组合成一个分层次的层叠上下文
• 每个层叠上下文和兄弟元素独立：当进行层叠变化和渲染的时候，只需要考虑后代元素
• 每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中

最佳实践

• 不犯二准则：对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2
• 对于浮层元素，可以通过 JS 获取 body 下子元素的最大 z-index 值，然后在此基础上加 1 作为浮层元素的 z-index 值

对于非浮层元素，不要过多地去运用 z-index 去调整显示顺序，要灵活地去运用层叠水平和"后来居上"的准则去让元素获得正确的显示，如果是在要设置 z-index 去调整，不建议非浮层元素 z-index 数值超过 2，对于 DOM 元素，-1, 0, 1, 2 足够让元素有正确的显示顺序。

对于浮层元素，往往是第三方组件开发，当你无法确认你的浮层是否会百分百覆盖在 DOM 树上的时候，你可以去动态获取页面 body 元素下所有子元素 z-index 的最大值，在此基础加一作为浮层元素 z-index 值，用于保证该浮层元素能够显示在最上方。

参考资料

• 深入理解CSS中的层叠上下文和层叠顺序
• 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
• CSS深入理解之z-index
• CSS的“层”峦“叠”翠