在此运行 完全在你的浏览器里运行，不上传、不登录
z-index 层叠可视化
添加多个层并按绘制顺序排序，同时了解哪些属性会创建层叠上下文。
绘制顺序（由后至前）
重叠预览
预览把所有层都用绝对定位摆放，这样即使标记为 static 的层也能看清绘制顺序。
哪些情况会创建新的层叠上下文
- 定位元素（position 不是 static）且 z-index 不是 auto。
- opacity 小于 1 的元素。
- transform、filter、backdrop-filter 或 perspective 不为 none 的元素。
- isolation: isolate、mix-blend-mode 不为 normal，或 will-change 指向上述属性的元素。
- z-index 不为 auto 的 flex 或 grid 子项，以及文档根元素。
怎么用
- 给层命名，设置 z-index 并选择 position 取值。
- 可选：降低不透明度、勾选 transform，或标记该层会创建独立的层叠上下文。
- 点「添加层」，列表会按浏览器实际绘制顺序自动重排。
- 对照重叠预览方块，虚线边框表示该层会创建层叠上下文。
- 可以单独移除某一层，或清空后重建，用来推演真实项目里的遮挡问题。
常见用法
- 排查遮挡失效 —— 立刻看出 static 层根本不会响应 z-index。
- 规划弹层层级 —— 把基础内容、吸顶头部与对话框放进同一张有序清单。
- 讲解层叠规则 —— 演示 z-index 对 position: static 元素完全无效。
- 检查副作用 —— 标记 opacity 小于 1 的层，看它如何变成层叠上下文。
常见问题
问：为什么 static 层排在 z-index 为 0 的定位层后面（更靠下）？ 答：CSS 绘制算法先画流内非定位内容，再画 z-index 为 auto 或 0 的定位后代。给 static 元素加 z-index 不会有任何效果，这正是遮罩层出不来最常见的原因。
问：z-index 小就一定在后面吗？ 答：只在同一个层叠上下文内成立。处于不同层叠上下文的两个元素要通过各自的父级比较，所以 z-index 为 999 的子元素也可能被父级兄弟元素的 z-index 2 压住。
问：勾选「创建层叠上下文」会改变什么？ 答：它标记该层会将其后代包住，后代无法再与层外的元素比较层级。可视化用虚线边框画出这条边界，方便你在重排列表时看清范围。
你的数据留在这台设备上
z-index 层叠可视化 完全在本地运行。你粘贴或拖入的一切都由你自己的浏览器处理，不会被传走。我们的服务器不保存任何东西——关掉标签页就没了。
你输入的内容不会发往服务器、不被记录，也不用于分析统计。首次加载之后即使断网，这个页面照样能用。