Z-index 系统

假设您遇到一个 z-index 错误。 有些内容被其他内容遮盖了。 以我的经验，一个典型的解决方案是在该元素上设置 position: relative，以便首先使 z-index 正常工作，并且可能重新调整 z-index 值，直到正确的元素位于顶部。

这里的危险是，这会引发一场小小的 z-index 战争。 在这里提高 z-index 值修复了一个错误，但随后会覆盖其他地方的另一个元素，从而导致另一个错误，而您并不希望这样做。 希望您可以推断出情况并修复错误，即使这意味着重构比您认为需要更多的 z-index 值。

如果 z-index 值的“堆栈”足够复杂，您可能需要考虑抽象。 其中一个问题是，您的 z-index 值可能随机散布在您的 CSS 中。 因此，与其简单地让它保持这样，您可以为自己提供一个中心位置，供 z-index 值在以后引用。

我过去曾在 Sass 地图中介绍过这样做

$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-index 有时可以用作沮丧计，衡量开发人员的心情。

维护可维护的 z-index 值的关键在于理解，z-index 值并不总是可以直接比较。 它们不是沿着从视窗延伸出的虚构尺子的绝对测量值；相反，它们是同一堆叠上下文中元素之间的相对顺序。

事实证明，有一个很好用的调试工具，用于以浏览器扩展的形式调试堆叠上下文（Chrome 和 Firefox）。 Andy 陷入了一个非常棘手的情况，其中网站的 RTL 版本有一条规则使用 transform 在页面上移动视频。 该 transform 触发了一个新的堆叠上下文，因此产生了无法点击按钮的错误。 令人讨厌。

这让我想到，可能存在某种内置的 DevTools 方法来查看/理解堆叠上下文。 我不知道这是否是正确答案，但我一直看到 DevTools 中越来越多地倾向于使用“徽章”。 这些东西

事实上，Chrome 94 最近发布了 针对容器查询的新徽章，因此它们的使用越来越多。

也许可以为堆叠上下文创建一个徽章？ 徽章通常的做法是，点击它，它会显示一个特殊的 UI。 例如，对于 flexbox 或 grid，它将显示所有网格线的叠加层。 堆叠上下文的特殊 UI 可以是颜色/纹理编码的，并标记显示所有堆叠上下文及其叠放方式的区域。