z-index 层叠上下文可视化
z-index 层叠上下文可视化工具用分层示意讲清 stacking context 的形成条件：父级一旦因 transform、opacity 等创建新上下文，子元素 z-index 再大也只能在本层内比较，帮你定位「数值高却被压住」的真相。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 摆出父子元素与各自层级
- 给父级开启 transform 等触发条件
- 观察子元素层叠范围被锁定
- 对照结论修正真实布局
典型场景
调试弹窗被导航栏遮挡的层叠问题
理解动画元素为何困住下拉菜单
排查 transform 引发的覆盖异常
常见问题
为什么 z-index 很大还在下面？
祖先创建了层叠上下文，比较只在该上下文内进行。
哪些属性会触发新上下文？
transform、opacity、fixed 定位等都会创建新层叠上下文。
能直接给修复方案吗？
它帮你理解成因，具体调整需结合实际 DOM 层级决定。