z-index生效需元素为定位元素且处于同一层叠上下文中；父元素的opacity、transform等会创建新上下文，使子元素z-index仅在内部比较；无z-index时按dom顺序和元素类型决定层叠顺序。
DOM 元素的层叠顺序（即谁在上、谁在下）主要由 z-index 控制，但它的生效有前提条件——元素必须处于**同一个层叠上下文（stacking context）**中，且该元素需满足触发层叠上下文的条件（如设置 position 为 relative/absolute/fixed/sticky，或设置 opacity、transform 等）。单纯写 z-index 不一定起作用。
z-index 生效的前提条件
z-index 只对定位元素（position 值为 relative、absolute、fixed 或 sticky）有效。静态定位（static）元素即使设了 z-index 也会被忽略。
- 确保目标元素设置了
position: relative;（最常用，不改变布局流）或其它定位方式 - 检查父级是否无意中创建了新的层叠上下文（比如父元素有 opacity
- 避免滥用 z-index：从 0 或 1 开始，按需递增；不要一上来就写 9999、99999
层叠上下文的创建与嵌套影响
每个层叠上下文内部有一套独立的层叠规则。外部元素的 z-index 再高，也无法“穿透”进一个已创建的层叠上下文中压住它的子元素。
- 常见触发层叠上下文的 CSS 属性：
opacity 、<code>transform（哪怕只是transform: translateZ(0)）、filter、will-change、isolation: isolate - 例如：一个 modal 弹窗设置了
transform: scale(1)，它内部的按钮即使 z-index 设为 1000，也不会盖过外部未触发上下文的导航栏（z-index: 10）——因为它们不在同一上下文 - 调试技巧：用浏览器开发者工具的“Layers”面板（Chrome）或勾选“Paint flashing”观察层叠上下文边界
层叠顺序的自然层级（无 z-index 时）
当多个元素都没有显式设置 z-index，或同属一个层叠上下文且 z-index 相同，浏览器会按 DOM 顺序和类型决定谁在上：
- 层叠顺序从低到高依次为：背景和边框 → 浮动元素 → 普通流内块级元素 → 行内元素 → 定位元素（按 HTML 中出现顺序，后出现的覆盖先出现的）
- 也就是说，两个
position: relative的 div，后面那个默认就在前面那个上面，无需 z-index - 注意：伪元素（::before / ::after）属于其宿主元素的层叠层级，受宿主影响
实用调试与常见陷阱
遇到“z-index 不生效”，别急着加数字，先验证结构逻辑：
- 用
getComputedStyle(el).zIndex查看计算值，确认是否解析为 auto（无效）或数值 - 检查父级是否有
overflow: hidden+ 定位组合——这可能裁剪内容，造成“被盖住”的错觉，实则不是 z-index 问题 - 避免跨框架/iframe 调整 z-index：不同 iframe 有自己的渲染上下文，z-index 互不影响
- 移动端 Safari 对 transform 触发的层叠上下文更敏感，测试时务必真机验证
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
