适用于 z-index 的系统

![2021-11-02 10.01.18.jpg][1]
说你有一个z-index的错误。有些东西被其他东西掩盖了。根据我的经验，一个典型的解决方案是把position: relative放在那个东西上，这样z-index就会首先工作，然后也许会重新调整z-index值，直到正确的东西在上面。

这里的危险在于，这将引发一场小小的z-index战争。在这里提高一个z-index值修复了一个bug，然后在你不想这样做的时候，通过遮盖其他地方的一些元素而导致另一个bug。希望你能对这种情况进行推理，并修复这些错误，即使这意味着重构比你想象中更多的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,
);
```

这里的想法是，大多数数值是由工具自动生成的（空值），但如果你愿意，你可以指定它们。这样，如果你有一个第三方组件的Z-index值你不能改变，你可以把它插入地图，然后当你在上面做图层时，自动生成的数字会把它考虑进去。这也意味着很容易在其他图层之间滑动。

我认为所有这些都是聪明和有用的东西--但我也认为它对另一个常见的Z-index错误没有帮助：堆叠上下文。正如我所写的那样，它始终是堆叠上下文。如果某个元素在一个堆叠上下文中，而这个上下文又在另一个堆叠上下文之下，那么就不可能有任何z-index值能把它放在上面。这是个更难解决的问题。

Andy Blum最近写了关于这个问题

> 前端开发的巨大挫折之一是那些相同元素的意外互动和重叠。挣扎着沿着Z轴安排元素，Z轴垂直于电脑屏幕向观众延伸，是这样一种共同的前端体验，以至于元素的Z指数有时可以被用作衡量开发者心情的挫折表。
> 可维护的z-index值的关键是理解z-index值不能总是被直接比较。它们不是沿着延伸到视口外的假想尺的绝对测量；相反，它们是同一堆叠环境中元素之间的相对顺序。

安迪遇到了一个非常棘手的情况，一个网站的RTL版本有一个规则，使用一个转换来移动页面上的视频。这个转换触发了一个新的堆叠环境，因此出现了一个无法点击的按钮的错误。

这让我想到，可能有一些内置的DevTools方式来查看/理解堆叠上下文。我不知道这是否是正确的答案，但我已经看到DevTools中越来越多的人倾向于 "徽章"。这些东西:

![CleanShot-2021-09-19-at-13.24.07@2x.png][2]

事实上，Chrome 94最近为容器查询投放了一个新的，所以它们被越来越多地使用。

也许可以有一个用于堆叠语境的徽章？通常情况下，徽章的情况是，你点击它，它会显示一个特殊的用户界面。例如，对于flexbox或grid，它将显示所有网格线的叠加。堆叠语境的特殊用户界面可以是颜色/纹理编码和标记的区域，显示所有的堆叠语境以及它们是如何分层的。

[1]: http://guobacai.com/usr/uploads/2021/11/2267329005.jpg
  [2]: http://guobacai.com/usr/uploads/2021/11/3827994280.png

适用于 z-index 的系统

评论已关闭