定位是z-index生效的前提，只有position为relative、absolute、fixed或sticky时，z-index才起作用；数值越大层级越高，相同值按文档流顺序叠加；父元素创建层叠上下文后，子元素的z-index受限于其范围，需整体协调层级结构。
在CSS中实现层叠效果，关键在于理解 z-index 与定位（position）属性的配合使用。z-index 本身不会对普通文档流中的元素起作用，必须结合定位属性才能生效。掌握这一点，就能灵活控制页面元素的前后层级关系。
定位是z-index生效的前提
只有当元素的 position 属性值为 relative、absolute、fixed 或 sticky 时，z-index 才会起作用。静态定位（position: static，默认值）的元素即使设置了 z-index，也不会改变其层叠顺序。
例如：- 一个 absolute 定位的弹窗需要浮在页面其他内容之上，就必须设置 z-index 大于底层元素。
- 两个 relative 定位的卡片重叠时，可通过 z-index 决定谁在上层。
z-index的数值控制层叠顺序
z-index 接受整数（正、负、0），数值越大，元素越靠前。相同值时，遵循 HTML 文档流的绘制顺序：后出现的元素覆盖先出现的。
实用建议：
- 常用模态框、导航栏等全局组件可设 z-index: 1000 或更高，避免被其他内容遮挡。
- 避免滥用高数值，如 z-index: 9999，会导致后续调整困难。建议分层管理，比如 10/20/50/100 等阶梯式取值。
- 负值可以让元素“沉”到背景层之下，适用于某些特殊视觉效果。
注意层叠上下文的影响
当某个父元素创建了新的层叠上下文（如设置了 opacity 小于1、transform、或 z-index 为具体数值且 position 不为 static），它的子元素的 z-index 只在该父容器内有效，无法突破父级边界影响外部元素。
立即学习“前端免费学习笔记（深入）”；
常见陷阱：- 一个高 z-index 的子元素被低层级的兄弟容器挡住，原因可能是父容器的层叠等级更低。
- 修复方法：调整父级的层叠顺序，而非一味提高子元素的 z-index。
