无需登录 数据私有 本地保存

z-index层级可视化 - 拖拽相互遮挡关系

14
0
0
0

Z-Index 层级可视化

拖拽方块调整位置 · 观察层叠遮挡关系 · 直观理解 CSS z-index

拖拽方块移动位置 · 重叠区域展示 z-index 遮挡效果 · 拖拽时自动置顶
层级顺序（从高到低）
点击箭头调整层级 · 悬停列表项高亮画布方块

关于 Z-Index 的常见问题

z-index 是 CSS 中控制元素在 Z 轴（垂直于屏幕的纵深方向）上堆叠顺序的属性。数值越大，元素越靠近用户（显示在上层）。它只对定位元素（position 为 relative、absolute、fixed 或 sticky）生效。在同一层叠上下文中，z-index 较高的元素会遮挡 z-index 较低的元素。如果两个元素 z-index 相同，则后出现在 HTML 中的元素在上层。

常见原因有：① 元素没有设置 position（非 static）；② 元素处于不同的层叠上下文中，z-index 只在同一上下文内比较；③ 父元素创建了新的层叠上下文（如设置了 opacity < 1、transform、filter 等属性），子元素的 z-index 被限制在父级上下文内；④ 被更高层叠上下文的元素完全覆盖。

层叠上下文是 HTML 元素在 Z 轴上的独立堆叠空间。每个层叠上下文内部的 z-index 只在该上下文内有效，不会与外部的元素比较。创建层叠上下文的条件包括：position + z-index（非 auto）、opacity 小于 1、transform、filter、perspective、clip-path、will-change 等属性。理解层叠上下文是掌握 z-index 的关键。

理论上 z-index 的最大值是 2147483647（32 位有符号整数的最大值）。但在实际开发中，建议使用合理的小范围数值（如 1-1000），并按模块划分区间（如弹窗 100-199、导航 200-299、提示 300-399）。避免使用 9999 这样的极端值，否则后期维护会很困难。

推荐做法：① 使用 Sass/Less 变量或 CSS 自定义属性统一管理 z-index 值；② 按功能模块划分层级区间（如：基础内容 1-10、 sticky 导航 50-60、下拉菜单 100-150、模态弹窗 200-250、通知提示 300+）；③ 在代码注释中记录各区间用途；④ 避免随意使用大数值，保持层级体系清晰可维护。
🔧 相关工具