如何通过z-index属性调整HTML元素显示顺序？

本文共计848个文字，预计阅读时间需要4分钟。

`z-index 不是写上就生效的属性，它只对已定位（positioned）的元素起作用。例如，如果你给一个普通的 `div` 直接添加 `z-index: 999`，但没有设置 `position` 属性，那么它可能不会有任何效果。大概率是因为它没有定位，所以 `z-index` 无法发挥作用。

必须先设 position 才能用 z-index

浏览器只认「定位元素」的 z-index。所谓定位元素，是指 position 值为 relative、absolute、fixed 或 sticky 的元素。

• 写 position: static（默认值）或完全不写 position，z-index 会被忽略
• position: relative 最常用：不脱离文档流，适合微调+层级控制
• position: absolute 适合弹窗、提示框等需脱离流的场景，但要注意父容器是否带 position
• 别用 position: absolute 布局整页——响应式会崩，且容易触发意外堆叠上下文

为什么两个 z-index 数值一大一小，还是被盖住？

问题不在数值本身，而在它们是否属于同一个堆叠上下文（stacking context）。父级一旦创建了独立堆叠上下文，子元素的 z-index 就只在内部比大小，跨父级无效。

• 常见触发父级新建堆叠上下文的操作：position: relative + z-index（非 auto）、opacity: 0.99、transform: translateZ(0)、will-change: transform
• 排查方法：打开开发者工具 → 「Computed」面板 → 搜索 z-index 和 stacking context，看是否标出「Stacking Context」
• 临时验证：把疑似父容器的 opacity 或 transform 注释掉，观察层级是否恢复正常

iOS Safari 和 iframe 的特殊限制

移动端和嵌入场景下，z-index 表现更易出错，不是 bug，是规范行为。

立即学习“前端免费学习笔记（深入）”；

• iOS Safari 对 transform: translateZ(0) 或 will-change: transform 极其敏感，哪怕只是为了开启硬件加速，也可能意外创建新堆叠上下文，让某个按钮“突然浮到最上面”
• iframe 内部是一个完全独立的文档环境，它的 z-index 与父页面毫无关系；你无法用父页的 z-index 把遮罩层盖在 iframe 上面
• 如果必须覆盖 iframe，只能在 iframe 同级 DOM 层级插入元素，并确保该元素的父容器有更高堆叠上下文优先级

真正决定渲染顺序的，不是 z-index 数字本身，而是浏览器构建的堆叠上下文树。数值只是同一上下文内的排序依据。很多人卡在“为什么我写了 9999 还是压不住别人”，其实该查的是谁悄悄当了“小 boss”——那个创建了局部堆叠上下文的父容器。