定位元素才能使用z-index改变层叠顺序，且z-index在堆叠上下文中生效，不同上下文间不直接比较数值；例如父A z-index:1 子A1 z-index:999 仍低于父B z-index:2；需合理设计结构、避免多余堆叠上下文、提升关键元素层级以确保正确层叠。
在CSS布局中，z-index 控制元素的层叠顺序，但它的实际效果受定位上下文和堆叠上下文（stacking context）影响。仅设置 z-index 不一定能达到预期的层叠效果，必须结合元素的定位方式和父级结构来理解。
定位是使用 z-index 的前提
只有定位元素（即 position 值为 relative、absolute、fixed 或 sticky）才能通过 z-index 改变层叠顺序。对 static 定位的元素设置 z-index 无效。
常见情况：- div { position: relative; z-index: 10; } → 有效
- div { position: static; z-index: 10; } → z-index 被忽略
堆叠上下文决定层级范围
z-index 并非全局比较，而是在各自的堆叠上下文中生效。一个高 z-index 的子元素，无法超过另一个堆叠上下文中层级更高的父元素，即使其数值更大。
触发新的堆叠上下文的方式包括：- position 为 relative/absolute/fixed/sticky 且 z-index 不为 auto
- opacity 小于 1
- transform 不为 none
- will-change 设置为 opacity 或 transform
- filter 不为 none
例如：父A z-index: 1，内部子A1 z-index: 999；父B z-index: 2。尽管子A1数值大，但仍位于父B之下，因为父级堆叠上下文优先。
立即学习“前端免费学习笔记（深入）”；
如何正确控制层叠顺序
要实现理想的覆盖关系，需从结构设计入手：
- 确保需要调整层级的元素已定位（如 position: relative）
- 避免在不必要的地方创建新堆叠上下文（如无需求时不要设 opacity 或 transform）
- 将需要置顶的元素（如弹窗、提示框）提升到外层容器，甚至与 body 同级（可通过 Portal 技术）
- 使用较高的 z-index 数值（如 1000 以上）预留空间，避免频繁冲突
实用建议
开发中常见的模态框、下拉菜单被遮挡问题，通常是因为它们处于低层级的堆叠上下文中。解决方案是将其移出复杂嵌套，或确保其父级没有意外创建堆叠上下文。
示例：
.modal {
position: fixed;
z-index: 1050;
top: 0; left: 0; right: 0; bottom: 0;
}
只要 .modal 的父级未形成更高层级的堆叠上下文，它就能正常显示在页面最上层。
基本上就这些。关键是理解 z-index 不是孤立起作用的，必须结合定位和堆叠上下文来看。
