如何通过css z-index控制元素堆叠顺序
z-index决定重叠元素的堆叠顺序，需配合定位属性使用，且受层叠上下文限制，父子元素层级相互影响，合理分层可避免显示异常。
在网页布局中，当多个元素发生重叠时，z-index 属性决定了它们的堆叠顺序。数值越大，元素越靠前显示；数值越小，越靠后。但要正确使用 z-index，需要理解它的工作机制和一些关键前提。
z-index 的基本规则
z-index 只对定位元素生效。也就是说，元素必须设置了 position 为 relative、absolute、fixed 或 sticky 才能使用 z-index 控制层级。
- 默认情况下，所有元素的 z-index 为 auto，相当于 0
- 正数使元素浮在上方，负数则沉在下方
- 可以使用任意整数（如 -10, 0, 1, 999）
理解层叠上下文（Stacking Context）
z-index 不是全局比较的。当父元素创建了新的层叠上下文，其子元素的 z-index 只在该容器内有效。这意味着即使一个子元素 z-index 设置为 999，如果它的父容器整体层级较低，它依然可能被另一个父容器中 z-index 较小的元素覆盖。
以下情况会创建新的层叠
上下文：
- position 值为 fixed 或 sticky（直接子元素参与层叠）
- z-index 为数值（非 auto）且 position 不为 static
- opacity 小于 1
- transform、filter、will-change 等属性触发时
实用技巧与常见问题
避免过度使用高 z-index 值（如 9999），这会导致后期维护困难。建议分层管理，例如：
- 背景层：z-index: 0 或 -1
- 内容层：z-index: 1–10
- 弹窗、导航栏：z-index: 100–200
- 模态框、提示框：z-index: 1000 以上
如果发现 z-index 不生效，请检查：
- 元素是否设置了定位（position）
- 是否被其他层叠上下文“隔离”了
- 父元素是否隐藏或裁剪了子元素（如 overflow: hidden）
