z-index 需配合 position: absolute 等定位属性使用，通过设置数值控制元素层叠顺序，数值越大越靠上，但受层叠上下文限制，常用于模态框、下拉菜单等场景，需合理规划层级避免冲突。
在CSS中，z-index 与 position: absolute 配合使用，可以精确控制元素的层叠顺序。默认情况下，HTML元素按照文档流顺序堆叠，后出现的元素显示在上方。但通过设置定位和 z-index，我们可以打破这种默认行为。
1. 基础条件：启用定位才能使用 z-index
z-index 只对已定位元素生效，即 position 属性值为 absolute、relative、fixed 或 sticky 的元素。
若想用 absolute 定位并控制层级，需先设置：
position: absolute;然后才能通过 z-index 指定堆叠顺序。数值越大，元素越靠上。
立即学习“前端免费学习笔记（深入）”；
2. 设置 z-index 控制显示层级
给需要分层的元素分别设置 z-index 值：
- 正数：层级高于默认元素（如 z-index: 1, 2, 10）
- 0：默认层级，通常位于中间
- 负数：层级最低，会显示在普通内容下方（如 z-index: -1）
示例：
.box1 { position: absolute; top: 20px; left: 20px; z-index: 1; }
.box2 { position: absolute; top: 40px; left: 40px; z-index: 2; }
尽管 box1 在HTML中可能后出现，但 box2 因 z-index 更大而显示在上方。
3. 注意层叠上下文的影响
z-index 并非全局比较，它受层叠上下文限制。一个元素的 z-index 只在它的层叠上下文中有效。
以下情况会创建新的层叠上下文：
- 根元素（html）
- position 不为 static 且 z-index 值不为 auto 的元素
- opacity 小于 1 的元素
- transform、filter 等属性被使用的元素
这意味着，父容器即使 z-index 很高，其内部子元素也无法超出该容器的层级范围。
4. 实际应用建议
常见用途包括模态框、下拉菜单、轮播图等需要“浮起”的组件。
- 确保目标元素有 position: absolute（或 relative/fixed）
- 合理分配 z-index 数值，避免随意使用极大数字（如9999）
- 可定义层级变量（如 --z-modal: 1000; --z-dropdown: 900）便于维护
- 注意父级是否创建了独立的层叠上下文，影响子元素表现
基本上就这些。掌握 z-index 与 absolute 的配合，就能灵活控制页面中元素的前后关系。关键点是：定位开启 z-index 权限，数值决定前后顺序，上下文限制作用范围。
