处理 z-index

管理大型网站上的 z-index 可能会很痛苦。CSS 难以测试，因此很容易进行更改，从而最终隐藏一些重要的 UI，而您不知道它在哪里。

如果您使用 CSS 预处理器，也许我们可以以特殊方式处理它。

来自游戏编程的想法

垂直堆叠顺序不仅是网页设计的问题，对于游戏开发者来说也是一个主要问题。他们在更加动态的环境中工作，在这种环境中，哪些东西出现在其他东西的顶部至关重要。

在与正在 深入游戏世界 的 Ryan Campbell 的简短交谈中，他说通常处理它的方法是一个枚举（类似于一个命名的常量数组）变量，然后您在需要时引用它。

以下是他可能会使用的一些代码示例

typedef enum : uint16_t {
  WorldLayerGround             = 100,
  WorldLayerBelowCharacter     = 200,
  WorldLayerAboveCharacter     = 400,
  WorldLayerTop                = 800,
  WorldLayerCount              = 1600
} WorldLayer;

它是在专门用于声明游戏要使用的常量的文件中定义的。请注意，

1. 它们全部一起声明
2. 数字之间留有空格

在网页设计中，看到人们用 z-index 编排数百个数字也很常见。这样做的目的是，如果需要，您可以在以后插入一些东西，而如果您使用 1、2、3 等，则无法做到，因为 z-index 不支持小数。但很少看到像那样分组声明 z-index。在我看来，这似乎是一个好主意！

分组

这样做的目的是将控制垂直堆叠的所有代码都放在一个地方。您可以将所有这些内容放在一起。

.modal {
  z-index: 9000;
}
.overlay {
  z-index: 8000;
}
.header {
  z-index: 7000;
}

但我不是很喜欢这样做。我不喜欢为了组织而重复整个样式表中的选择器。这只是个人喜好。当我找到一个类定义的位置时，该类执行的所有操作都在那里。

也许我们可以做同样的事情，只是使用值……

z-index 部分

也许预处理器的最有用功能是能够进行包含。将多个文件合并到一个输出文件中。这意味着您可以以对您有意义的方式组织您的 CSS，这几乎肯定意味着将其分解成小的模块化部分。

也许您已经有了 variables.styl 或 constants.less 之类的文件。您可以变得更加模块化，并创建一个专门用于管理 z-index 的文件。在 SCSS 中，仅用于包含的文件的典型命名约定以一个下划线开头，因此我们将创建一个 _zindex.scss。

在该文件中，您将声明包含整个站点中使用的所有 z-index 值的变量。

$zindexModal   : 9000;
$zindexOverlay : 8000;
$zindexHeader  : 7000;

然后，在其他 SCSS 文件的全局包含集中，您始终可以使用它

@import "zindex";

并根据需要使用它们

.header {
   z-index: $zindexHeader;
}

这样做的目的是 **尽一切可能做到这一点**。不要在没有为其创建变量并将其放置在 _zindex.scss 文件中的堆栈中的情况下声明 z-index。

地图可能更简洁

同样的想法，但使用 Sass 地图而不是单个全局变量

$zindex: (
  modal     : 9000, 
  overlay   : 8000,
  dropdown  : 7000,
  header    : 6000,
  footer    : 5000
);

.header {
  z-index: map-get($zindex, header);
}

---

我想我会将网站转换为这种系统。我没有任何缺点，而且有很多优点。