z-index控制元素层叠顺序，但仅对定位元素（position为relative、absolute、fixed、sticky）生效；其值越大层级越高，且受层叠上下文限制，不同上下文中z-index独立比较，需合理规划层级避免覆盖问题。
在CSS中，控制元素的层叠顺序主要依靠 z-index 属性，但它的生效有一个前提：元素必须是定位元素。也就是说，只有当元素的 position 属性值为 relative、absolute、fixed 或 sticky 时，z-index 才会起作用。
z-index 的基本规则
z-index 决定元素在 Z 轴（垂直于屏幕）上的堆叠顺序。数值越大，元素越靠前。默认值为 auto，此时元素按文档流的自然顺序堆叠。
- 正数 > 0 > 负数（数值越大，层级越高）
- 未设置 z-index 的定位元素，默认 z-index: auto，行为类似于 z-index: 0
- 非定位元素（如 position: static）即使设置了 z-index 也不会生效
position 与 z-index 的组合使用
常见的 position 类型中，只要不是 static，都可以配合 z-index 控制层级。
- position: relative + z-index：常用于微调元素位置并控制其覆盖关系，比如下拉菜单浮出其他内容
- position: absolute + z-index：绝对定位脱离文档流，配合 z-index 精确控制模态框、提示层等
- position: fixed + z-index：固定定位常用于导航栏或弹窗，通常设置较高 z-index 防止被遮挡
- position: sticky + z-index：粘性定位在触发吸附时也会创建层叠上下文，可设置 z-index 提升层级
层叠上下文的影响
z-index 不仅受自身值影响，还受层叠上下文（stacking context）限制。每个层叠上下文是一个独立的“堆叠环境”，子元素的 z-index 只在该环境中比较。
立即学习“前端免费学习笔记（深入）”；
以下情况会创建新的层叠上下文：
- 根元素（HTML）
- position 值为非 static 且 z-index 不为 auto 的元素
- flex 或 grid 容器的子项（若 z-index 不为 auto）
- opacity 小于 1 的元素
- transform、filter、will-change 等属性触发时
这意味着：一个 z-index: 999 的元素如果位于 z-index: 1 的层叠上下文中，也可能被 z-index: 2 的外部元素覆盖。
实用建议与常见问题
避免滥用高 z-index（如 9999），容易造成维护困难和覆盖问题。推荐采用分层管理：
- 背景层：z-index: -1 到 0
- 内容层：z-index: 1 到 10
- 导航/悬浮：z-index: 10 到 50
- 模态框/提示：z-index: 100 以上
调试时可用浏览器开发者工具查看层叠结构，确认是否意外创建了层叠上下文导致 z-index 失效。
基本上就这些，关键是理解 z-index 必须配合定位使用，并注意层叠上下文的边界影响。合理组织结构，层级控制就很清晰。
