z-index设再大也没用，是因为父容器触发了层叠上下文；如opacity、transform、filter或position: relative配z-index: 0均使其子元素z-index失效于该容器外。
z-index设再大也没用，是因为父容器悄悄建了层叠上下文
响应式布局里给按钮或弹窗加z-index: 9999却仍被盖住，大概率不是值不够，而是它的直接父容器触发了层叠上下文——比如加了opacity: 0.99、transform: scale(1)、filter: blur(0)，甚至只是position: relative配z-index: 0。这些都会让子元素的z-index失效于该容器之外。
常见场景：
- 轮播图容器用了
transform: translateX(0)做动画兼容，结果把内部的“下一页”按钮锁死在自己内部 - 导航栏用了
opacity: 0.999抗锯齿，导致下拉菜单出不来 - 第三方 UI 组件（如日期选择器）挂载在某个带
will-change: transform的 div 下，整个浮层层级被压低
验证方法：Chrome DevTools → Elements → 选中父容器 → Computed 面板搜 stacking context，显示 yes 就是它。
移动端 Safari 和 Chrome 对 fixed 元素的层叠上下文处理不一致
position: fixed元素天然创建层叠上下文，但不同浏览器对它的子元素z-index解释有差异。Safari 尤其敏感：如果 fixed 导航栏的父级（比如.app-shell）同时有transform，那整个导航及其下拉菜单可能被降级到 body 层级之下。
实操建议：
- 避免在
position: fixed容器外层再套一层带transform或opacity的 wrapper - 若必须用
transform做过渡效果，优先用translateY()而非translateZ(0)，后者在 Safari 中更容易意外创建新上下文 - 在 iOS Safari 中测试时，临时给 fixed 元素加
backface-visibility: hidden有时能绕过渲染 bug，但别依赖它治本
Grid / Flex 容器里的子项 z-index 不生效，缺了这行关键代码
Grid 或 Flex 布局中，子项默认是position: static，此时写z-index: 999完全无效——CSS 规范明确要求z-index只对已定位元素起作用。
修复只需一行：
.grid-item, .flex-child {
position: relative;
}
注意点：
- 不需要加
top/left等偏移，position: relative本身就能激活z-index - 不要和
place-self或align-self混用position: absolute，否则 Grid 轨道对齐会失效 - 如果子项含图片或动态文本，建议加
min-height或overflow: hidden，防止悬停时尺寸变化引发层叠顺序抖动
z-index 数值设多大才安全？别堆数字，看上下文树
设z-index: 2147483647看似保险，实际容易冲突：Ant Design 的 Modal 默认用1050，Tooltip 用2000，你设个几千万可能刚好压住它正在 fade-out 的过渡层，导致点击穿透或视觉残留。
更可靠的做法：
- 查项目里已有的
z-index定义，通常在variables.css或设计系统文档中有区间划分（如--z-header: 100、--z-modal: 1000） - 只比目标覆盖对象高
1～10，例如要盖住z-index: 1050的弹窗，设1051就足够 - 用 CSS 自定义属性统一管理，避免散落硬编码；特别注意
z-index: auto和z-index: 0语义不同：0会创建新上下文，auto不会
真正决定层级的从来不是单个数字，而是它所处的层叠上下文在整个 DOM 树中的位置——你调十处子元素的z-index，不如找到那个悄悄建了上下文的父级，把它抬高一级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
