要让z-index生效，元素必须设置非static定位，如relative、absolute等。z-index值越大层级越高，但受层叠上下文限制，父元素的z-index会影响子元素的显示顺序。例如，父元素A的z-index为2，父元素B为1，则A的所有子元素均在B及其子元素之上，即使B的子元素设置更高z-index也无效。建议使用语义化分层：-1为默认层，10为导航栏，100为弹窗，1000为全局提示，避免滥用高数值。
在CSS中控制元素的层级显示，主要依靠 z-index 属性，但这个属性只有在元素具有定位属性（即 position 不是 static）时才会生效。通过结合定位和 z-index，可以精确控制元素的前后覆盖关系。
定位是使用 z-index 的前提
默认情况下，所有元素的 position 为 static，此时设置 z-index 是无效的。要让 z-index 起作用，必须先为元素设置以下任意一种定位方式：
- relative：相对自身原始位置偏移
- absolute：相对于最近的已定位祖先元素定位
- fixed：相对于视口固定定位
- sticky：根据滚动位置在 relative 和 fixed 之间切换
例如：
.box {
position: relative;
z-index: 2;
}z-index 控制堆叠顺序
z-index 的值越大，元素越靠前；值越小，越靠后。它可以是正数、负数或 0。
立即学习“前端免费学习笔记（深入）”；
- 值为 auto 时，不创建新的层叠上下文，遵循默认堆叠规则
- 设置具体数值（如 1, 99, -1）时，数字大的元素会覆盖数字小的
示例：让一个提示框始终显示在最上层
.tooltip {
position: absolute;
z-index: 1000;
}避免常见陷阱：层叠上下文的影响
z-index 并非全局比较，它的作用范围受层叠上下文限制。每个设置了 z-index 且 position 不为 static 的元素，可能创建一个新的层叠上下文，其子元素的 z-index 只在该上下文中有效。
比如：父元素 A 的 z-index 是 2，父元素 B 是 1，那么 A 的所有子元素都会显示在 B 及其子元素之上，即使 B 的子元素设置了 z-index 为 999。
解决方法：尽量将需要置顶的元素放在 DOM 结构的外层，或确保其祖先没有不必要的 z-index 限制。
实用技巧与建议
- 用 relative + z-index 微调局部元素层级，不影响布局流
- 模态框、导航栏、悬浮按钮等常用 fixed + 高 z-index 实现顶层覆盖
- 避免滥用高数值，推荐使用语义化分层，例如：
- 1: 默认层
- 10: 导航栏
- 100: 弹窗
- 1000: 全局提示 - 负 z-index 可用于将背景元素置于更底层
基本上就这些。只要记住：定位开启 z-index 权限，数值决定前后顺序，结构影响作用范围。合理使用就能精准控制页面层级。
