Z-index 层级指南

查询与元素堆叠顺序相关的关键字:z-index、position、层叠上下文(stacking context)、isolation、auto 等,理解它们的规则以及为什么有时 z-index 看似不生效。全部在浏览器本地完成。

关键字查询 等待输入

输入关键字,例如 z-index、position、isolation、stacking context。

计算结果
收录条目—
当前结果—
输入关键字后点击查询,结果将显示在这里。

规则依据 CSS 规范整理;结果仅供参考。

计算说明
  • z-index 只对定位元素(position 非 static)或 flex/grid 子项生效。
  • 层叠上下文会「隔离」其内部元素的层级,外部无法越过。
  • 创建层叠上下文的常见方式:定位 + z-index、opacity < 1、transform、filter 等。
  • isolation: isolate 可显式创建层叠上下文。
  • 层级相同时,后出现的元素覆盖先出现的元素。