会形成 Stacking Context 的元素

  • root 元素( html )

  • position 不是 static 且 z-index 不是 auto 的元素

  • flex item 且 z-index 不是 auto 的元素

  • opacity 小于 1 的元素

  • transform 不是 none 的元素

  • mix-blend-mode 不是 normal 的元素

  • filter 不是 none 的元素

  • isolation 为 isolate 的元素

  • mobile webkit 和 chrome 22+ 上的 fixed 元素

  • 在 will-change 属性上指定值为上述任意属性的元素

  • 指定 -webkit-overflow-scrolling 为 touch 的元素

Stacking Context 的特性

  • stacking context 可以嵌套

  • 每个 Stacking context 相对于兄弟元素都是完全独立的, 其内部规则不会影响到外部

  • 每个 stacking context 元素都会被父级 stacking context 视为一个 stacking 规则

为已经定位的元素( absolute 或 relative) 指定 z-index 可以改变其 parent stacking context 中 z 的偏移量

一个值得注意的坑: 如果一个元素不是通过 absolute 或 relative 实现 stacking context, 那么他的 z-index 为 0 , 仅高于 auto, 且无法改变.