z-index 失效通常因元素不在同一层叠上下文：①父容器创建新层叠上下文（如设 opacity<1）；②z-index 仅在同级层叠上下文中生效。
元素被意外遮挡，通常不是定位本身出错，而是 z-index 的层级关系没理清，或父容器创建了新的层叠上下文，导致子元素的 z-index 失效。
z-index 不起作用？先看是否在同一个层叠上下文中
z-index 只在 同级层叠上下文 内生效。如果两个元素分属不同父容器，而父容器各自形成了层叠上下文（比如设置了 opacity
- 检查父级是否无意中触发了层叠上下文（常见陷阱：opacity: 0.99、transform: translateZ(0)、filter: blur(1px)）
- 用浏览器开发者工具的“Layers”面板或“Computed”标签页查看元素是否被标记为“stacking context”
- 若需统一控制层级，尽量让需要比较 z-index 的元素处于同一层叠上下文内（例如：把它们提到共同父容器下，或移除干扰的父级样式）
position 未设置，z-index 无效
z-index 对 静态定位（position: static）元素完全无效。即使写了 z-index，浏览器也会忽略。
- 确保目标元素设置了 position: relative / absolute / fixed / sticky
- 不推荐为全局加 position: relative 来“保险”，可能引发布局偏移或触发不必要的层叠上下文
- 只需对真正需要参与层叠控制的元素显式设定位方式
z-index 数值逻辑要清晰，避免盲目堆高
z-index 是整数，支持负值。但数值大小不是绝对权威，关键看它在当前层叠上下文中的相对顺序。
立即学习“前端免费学习笔记（深入）”；
- 不要滥用 9999、999999 等“魔数”，易引发后期维护冲突
- 建议按功能分层定义变量（如 --z-modal: 1000; --z-tooltip: 500; --z-header: 100），用 CSS 自定义属性统一管理
- 负 z-index 可用于隐藏在背景后，但注意：它会让元素无法响应鼠标事件，除非额外加 pointer-events: auto
固定定位（fixed）和粘性定位（sticky）的特殊行为
fixed 元素脱离文档流，其层叠上下文默认基于视口；sticky 元素则取决于最近的块级祖先容器。两者都可能因祖先的层叠上下文而受限。
- fixed 元素若被遮挡，优先检查它的直接父容器是否创建了层叠上下文（尤其是带 z-index 的 relative 容器）
- sticky 元素的层级由其所在“滚动容器”的层叠上下文决定，有时需给滚动容器显式设 z-index 和 position:relative 来释放控制权
- 必要时，将 fixed/sticky 元素提至 body 直接子级，并用 JS 动态控制显示/隐藏，绕过复杂嵌套层级
