如何通过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 就只在内部比大小，跨父级无效。