1. z-index 的作用与核心概念
1.1 何为 z-index 与 stacking context
在网页渲染的世界里，z-index 并非单纯的数字越大就越靠前，而是与 stacking context 的概念紧密相关。只有属于同一个定位上下文的元素才会彼此比较 z-index，从而决定谁在前谁在后。要点是：只有定位的元素才会参与 z-index 的比较，非定位元素不参与层级排序。
一个直观的起点是：如果两个 定位元素 放在同一个父容器内并设置了 z-index，浏览器会按数值从小到大排序，数值越大越靠前。若父容器创建了新的 stacking context，这将限制子元素在该上下文中的对比范围。
/* 简单的叠放示例 */
.a { position: relative; z-index: 1; background: lightblue; }
.b { position: relative; z-index: 2; background: lightcoral; }结论：理解 stacking context 的存在与边界，是避免多层嵌套时出现错位的关键，尤其在复杂组件结构中尤为重要。
1.2 关键规则与浏览器行为
浏览器对 stacking context 的规则并非简单的“谁的 z-index 大就覆盖谁”，还会受到 transform、opacity、filter、perspective、isolation 等属性的影响。这些属性会在元素上创建新的 stacking context，从而打破简单的父子关系。
例如，transform 或 opacity 小于 1 都会让该元素及其子元素形成独立的上下文，即使内部的子元素设置了较高的 z-index，外部也不能越过它。下面的示例说明了该行为。
.container { position: relative; transform: translateZ(0); }
.panel { position: absolute; z-index: 5; }
.overlay { position: fixed; z-index: 100; }在实际开发中，建议避免在同一 DOM 层级下过度使用 transform 来改变层级，因为它会无意中为某些子树创建新的 stacking context，从而引发不可预期的层级错乱。
2. 使用场景：日常页面布局中的 z-index 使用
2.1 浮动层与模态框
在实现模态框（Modal）与遮罩（Backdrop）这类浮层时，z-index 的正确设置至关重要。通常需要确保模态框位于所有其他内容之上，以避免被遮挡。
典型做法是给遮罩设定较低的 z-index，给模态框设定更高的值，确保模态框始终盖过遮罩与页面其他内容。
/* 遮罩层和模态框的层级关系 */
.backdrop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 900; }
.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; }如果模态框的父元素或祖先存在 transform、opacity 等会创建新 stacking context 的属性，模态框可能被局部覆盖。这时需要将模态框放在不被这些属性影响的容器中，或提升模态框所在的层级以跨越该上下文的限制。
2.2 下拉菜单与悬浮提示
下拉菜单和悬浮提示（tooltips）通常需要在其他控件之上显示，因此需要确保其 z-index 足够高。但若父容器已经形成独立的 stacking context，单独提高 z-index 可能无效。这时应从结构层面优化，将浮层放在与创建 stacking context 的父容器无关的位置，或使用固定定位来保持独立的层级。
/* 常见的下拉层级设置 */
.menu { position: absolute; z-index: 200; }
.tooltip { position: absolute; z-index: 300; }此外，如果下拉菜单需要跨越带有 transform 的父元素，可以考虑把浮层移出该父容器的结构，或者将其放到更高一层的 DOM 节点，以避免被父容器的 stacking context 限制。
3. 常见坑与调试方法
3.1 常见原因导致层级错乱
最常见的原因包含：父元素或祖先元素带有 transform、opacity、filter 等，会为子树创建新的 stacking context，导致子元素的 z-index 无法跨越该上下文与外部元素进行比较。
此外，position 的默认值是 static；只有非 static 的元素才参与 z-index 的比较。若将关键浮层设为 static，就会失去层级控制能力。
/* 避免在需要覆盖的元素上使用 static 定位 */
.popover { position: relative; z-index: 999; }还有一个常见坑是：父元素的 CSS contain 属性（如 contain: layout; 或 contain: paint;）可能影响渲染和层级判断，导致层级错乱。
3.2 调试技巧
调试时可以通过浏览器开发者工具查看元素的 position、z-index，以及它们所在的 stacking context。结合控制台和 DOM 树的直观视图，快速定位问题点。
// 快速查看某元素的堆叠属性
const el = document.querySelector('.target');
console.log('z-index:', getComputedStyle(el).zIndex);
console.log('position:', getComputedStyle(el).position);
在排查跨容器覆盖时，可以将浮层临时移动到根节点，或临时移除父容器的 transform，观察是否解决覆盖问题，以此判断 stacking context 的影响范围。
4. 实战技巧：逐步避免层级错乱
4.1 使用层级分层原则
建立一个清晰的层级体系，有助于避免层级错乱：可以为不同类型的组件分配固定的 z-index 区间，快速定位和调整。常见的做法是将不同类别的浮层放在不同的“层级段”中，避免在同一层级上频繁互相干扰。
示例：为模态框、提示、下拉、背景等设定一致且不冲突的数字区间，确保未来的维护者容易理解与修改。
/* 建议的层级区间（仅作参考） */
.backdrop { z-index: 100; }
.dropdown { z-index: 200; }
.modal { z-index: 1000; }
.tooltip { z-index: 1100; }策略性提升：尽量为需要覆盖的目标使用统一且稳定的数字序列，避免随意调整；这有助于降低后续维护成本并提升团队协作效率。
4.2 负 z-index 的使用场景与误区
负的 z-index 在某些布局中可以将元素置于页面背景之后，但这也可能导致鼠标点击、交互被遮挡，甚至出现不可见或不可交互的情况。谨慎使用，通常仅在特定的布局需求下作为辅助层来实现。
/* 负 z-index 的典型用法应有限制 */
.behind { position: relative; z-index: -1; }若需要视觉上覆盖背景但又希望保留交互性，最好将该元素放入一个独立容器中，并确保父容器不会额外创建新的 stacking context，从而避免意外覆写。
5. 兼容性与性能注意点
5.1 兼容性要点
现代浏览器（如 Chrome、Firefox、Edge、Safari）对 z-index 与 stacking context 的实现遵循统一规范。即便在部分旧版本浏览器中，基本的定位和层级关系也能正确呈现，但对复杂组合效果的表现可能存在差异。
在跨浏览器测试时，优先检查：是否存在明确的 position 与 z-index，以及父元素是否存在会创建新的 stacking context 的属性。
5.2 性能影响
为了提升滚动和动画的流畅性，可以在关键浮层上应用 will-change、transform 或 opacity 等属性，促成新的合成层，从而减少重绘。但要警惕，过多的合成层会增加 GPU 负担，影响整体渲染性能，因此要在实际场景中权衡使用。
/* 向元素添加合成层，提升绘制性能 */
.layer { will-change: transform, opacity; }在设计时应避免滥用合成层，尤其是在低端设备或复杂页面中：过多的层级叠加会带来内存与渲染成本的提高。合理的策略是仅在确有必要时才开启合成层，并在调试阶段监控性能指标。
