z-index不生效主因是父容器创建了新层叠上下文，常见触发条件包括非static定位且设z-index、opacity
z-index 不生效？先确认父容器是否创建了新的层叠上下文
很多情况下 z-index 看似写了却没效果，根本原因不是值设小了，而是它的父元素触发了层叠上下文（stacking context），导致子元素的 z-index 只在该上下文内比较。常见触发条件包括：position 不是 static 且设置了 z-index、opacity 小于 1、transform 非 none、filter 非 none 等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查目标元素的“Computed”面板，看
z-index是否被标记为“invalid”或灰色 - 若父容器有
transform: translateZ(0)或opacity: 0.99，它已创建新层叠上下文，子元素之间可比大小，但无法越过该容器去和外部兄弟元素争层级 - 必要时把需要跨层控制的元素提级到同一父容器下，或移除不必要的层叠上下文触发属性
absolute + relative 混合定位时，参考点容易错乱
当多个 position: absolute 元素嵌套在 position: relative 容器中，它们的偏移（top/left）始终以**最近的非 static 祖先**为参考。一旦中间某层意外加了 position: relative，整个定位链就偏了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具的“Layout”或“Box Model”视图逐层检查每个祖先的
position值，确认哪一层才是真正的定位参考点 - 避免无意义地给中间容器加
position: relative—— 如果只是为撑高或兼容旧写法，改用min-height或padding - 对关键浮动/绝对定位模块，显式加注释说明参考容器，例如：
/* 本元素相对于 .card-header 定位 */
多层弹窗叠加时 z-index 值管理混乱
模态框、Tooltip、Dropdown、Toast 同时存在时，靠硬编码 z-index: 9999 类似值极易冲突。不同组件库默认值可能重叠，更新后更难追溯。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 自定义属性统一管理层级基线，例如：
:root { --z-modal: 1000; --z-dropdown: 100; --z-toast: 10; }再按需叠加：z-index: calc(var(--z-modal) + 10); - 禁止在组件内部写死具体数字，所有
z-index必须通过变量或计算得出 - 在构建流程中加入 CSS lint 规则，拦截直接使用数字
z-index的声明
fixed 定位元素被 transform 父容器裁剪
当 position: fixed 元素的某个祖先设置了 transform（如 scale、rotate），该祖先会变成 fixed 的包含块（containing block），导致元素被裁剪或定位异常——这是 CSS 规范行为，不是 bug。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查
fixed元素的任意上级是否用了transform、perspective或filter；若有，把该fixed元素移到直接子级 - 若必须保留在 DOM 结构中（如 SSR 或框架限制），可用
position: absolute+top: env(safe-area-inset-top)模拟fixed效果，并监听scroll手动更新top - 移动端尤其注意：iOS Safari 对
fixed+transform组合的支持更敏感，测试时务必真机验证
复杂布局里，定位和层级从来不是孤立问题。一个 z-index 失效，往往要倒查三层样式；一次 top 偏移不对，可能是因为上头某个 overflow: hidden 和 transform 默默联手截断了参考系。动手前，先用开发者工具点开“Layers”面板看真实渲染层，比猜更可靠。
