比如你有一个 [z-index](https://css-tricks.com/almanac/properties/z/z-index/)错误。有些东西被其他东西掩盖了。根据我的经验，一个典型的解决方案是把position: relative ，所以z-index ，也许重新调整z-index ，直到正确的东西在上面。
这里的危险是，这引发了一场小小的z-index 战争。在这里提高一个z-index 值可以修复一个错误，然后在你不想这样做的时候，通过在其他地方掩盖一些其他的元素而导致另一个错误。希望你能对这种情况进行推理，并修复这些bug，即使这意味着重构更多的z-index 值，而不是你认为可能需要的。
如果z-index 值的 "堆栈 "足够复杂，你可以考虑一个抽象。其中一个问题是，你的z-index 值可能相当随机地散布在你的CSS中。因此，你可以给自己的z-index 值提供一个中心位置，以便以后参考，而不是简单地任其发展。
$zindex: (
modal : 9000,
overlay : 8000,
dropdown : 7000,
header : 6000,
footer : 5000
);
.header {
z-index: map-get($zindex, header);
}
现在你已经有了一个管理这些值的中心位置。
Rafi Strauss在OZMap中更进一步。这也是一个Sass地图的情况，但它的配置是这样的：
$globalZIndexes: (
a: null,
b: null,
c: 2000,
d: null,
);
这里的想法是，大多数值是由工具自动生成的（null 值），但如果你愿意，你可以指定它们。这样一来，如果你有一个第三方组件，有一个你无法改变的z-index 值，你可以把它插入地图，然后当你在上面做图层时，自动生成的数字会把它考虑进去。这也意味着它很容易在其他图层之间滑动。
我认为所有这些都是聪明和有用的东西--但我也认为它对另一个常见的z-index ：堆叠上下文的问题没有帮助。正如我所写的那样，它始终是堆叠上下文。如果某个元素在一个堆叠上下文中，而这个上下文又在另一个堆叠上下文之下，那么就不可能有z-index 值将它放在上面。这是个更难解决的问题。
Andy Blum最近写了关于这个问题：
前端开发的巨大挫折之一是那些相同元素的意外互动和重叠。挣扎着沿着Z轴安排元素，Z轴垂直于电脑屏幕向观众延伸和远离观众，这是一个共同的前端经验，一个元素的Z-index有时可以被用作衡量开发者情绪的挫折表。
可维护的z-index值的关键是理解z-index值不能总是被直接比较。它们不是沿着延伸到视口外的假想尺的绝对测量；相反，它们是同一堆叠环境中元素之间的相对顺序。
安迪遇到了一个非常棘手的情况，一个网站的RTL版本有一个规则，使用transform ，在页面上移动一个视频。这个transform ，触发了一个新的堆叠环境，因此出现了一个无法点击的按钮的错误。Gnarly。
这让我想到，可能有一些内置的DevTools方法可以看到/理解堆叠环境。我不知道这是否是正确的答案，但我已经看到DevTools中越来越多的人倾向于 "徽章"。这些东西。
事实上，Chrome 94最近为容器查询投放了一个新的徽章，所以它们正被越来越多地使用。
也许可以有一个用于堆叠上下文的徽章？通常情况下，徽章的情况是，你点击它，它会显示一个特殊的用户界面。例如，对于flexbox或grid，它将显示所有网格线的叠加。叠加背景的特殊用户界面可以是颜色/纹理编码和标记的区域，显示所有的叠加背景以及它们是如何分层的。
