css 中 z-index 属性作用 css 中 z-index 属性的使用场景

z-index属性在CSS中用于控制元素的垂直堆叠顺序，决定重叠时元素的显示优先级。其核心作用机制是通过数值比较确定层级，但需配合非static的position属性生效，且受堆叠上下文限制。

• 数值比较规则：z-index值为整数（正、负或零），数值越大，元素在堆叠层级中越靠上。未设置z-index的元素遵循默认堆叠顺序（后出现的覆盖先出现的）。
• 依赖position属性：仅对position值为relative、absolute、fixed或sticky的元素有效。若元素为position: static（默认值），z-index无效。
• 堆叠上下文限制：每个创建堆叠上下文的元素（如设置了position+z-index、opacity<1、transform等属性的元素）会限制子元素的层级比较范围。子元素的z-index仅在父级堆叠上下文内有效，无法跨越父级与其他上下文中的元素比较。

• 模态框与遮罩层：弹窗需高于遮罩层，遮罩层需高于页面内容。例如：.overlay { position: fixed; z-index: 900; /* 遮罩层 */}.modal { position: fixed; z-index: 1000; /* 弹窗 */}
• 下拉菜单：子菜单需高于父菜单和其他页面内容，避免被遮挡。
• 固定头部/底部：滚动页面时，导航栏需保持可见，需设置较高z-index（如z-index: 500）。
• 工具提示：提示框需高于触发元素，确保可读性。
• 图片叠加效果：控制多张图片或文字与图片的层叠顺序。
• 地图控件：标记、缩放按钮等需显示在地图图层之上。

1. 未设置position属性：元素为position: static时，z-index无效。需改为relative、absolute等。
2. 堆叠上下文限制：父元素创建了新的堆叠上下文（如设置了position+z-index或opacity<1），子元素的z-index仅在父级内比较。例如：<div class="parent-a" style="position: relative; z-index: 10;"> <div class="child-a" style="position: absolute; z-index: 100;"></div></div><div class="parent-b" style="position: relative; z-index: 5;"> <div class="child-b" style="position: absolute; z-index: 200;"></div></div>尽管child-b的z-index更高，但parent-a的堆叠上下文整体高于parent-b，因此child-a可能覆盖child-b。
3. 默认堆叠顺序干扰：未设置z-index时，元素按HTML文档顺序堆叠，后出现的元素可能意外覆盖目标元素。

1. 规划层级范围：按功能划分z-index数值区间，例如：

   1-10：常规元素（如按钮图标）。

   100-200：导航菜单、工具提示。

   500-600：固定头部/底部。

   900-999：遮罩层。

   1000-1100：模态框。

2. 使用CSS变量维护：通过变量统一管理层级，提高可维护性：:root { --z-index-dropdown: 100; --z-index-modal: 1000;}.dropdown { z-index: var(--z-index-dropdown); }
3. 避免滥用大数值：除非必要（如调试工具条），否则避免使用9999等极端值，防止层级失控。
4. 理解堆叠上下文：遇到z-index不生效时，检查父元素是否创建了新上下文，并调整父级position或z-index。
5. 添加注释说明：对特殊层级设置或跨组件关系添加注释，便于后续维护。

总结：z-index是控制元素层叠的核心属性，但需结合position和堆叠上下文理解其作用范围。通过规划层级、使用CSS变量和注释，可避免混乱，实现精准的层叠控制。