z-index的生效需基于非static定位，且受层叠上下文限制，父元素创建上下文后子元素层级在其内独立计算，合理分层与调试可精准控制堆叠顺序。
在CSS布局中，z-index 是控制元素堆叠顺序的关键属性。但它的行为受定位（position）和层叠上下文的影响，理解这些机制才能准确控制元素层级。
定位是使用 z-index 的前提
只有当元素的 position 属性值为 relative、absolute、fixed 或 sticky 时，z-index 才会生效。静态定位（static）的元素即使设置了 z-index 也不会起作用。
- 设置 position: relative; 后，元素仍在原位置，但可通过 z-index 调整层级
- 绝对定位元素脱离文档流，常配合 z-index 实现模态框、下拉菜单等覆盖效果
层叠上下文决定层级范围
z-index 不仅取决于数值大小，还受父级是否创建了新的层叠上下文影响。一旦某个父元素形成层叠上下文，其子元素的 z-index 只在该容器内比较。
- opacity 小于 1、transform 不为 none、position 为 fixed/sticky 等都会创建新层叠上下文
- 例如：一个 z-index: 9999 的弹窗若被包裹在 z-index: 1 的卡片中，仍可能被外部 z-index: 2 的元素覆盖
常见使用建议
避免滥用高数值，保持结构清晰可维护。
立即学习“前端免费学习笔记（深入）”；
基本上就这些。掌握定位规则和层叠上下文逻辑，就能稳定控制页面元素的显示层级。
