html - 是否有命名 z-index 图层的标准约定？

Question

我想创建一些 sass 变量来表示不同的 z-index 值，如果存在的话，我想使用预先存在的命名约定。我正在寻找类似 Swing 如何定义root、layered、content和glass窗格 之类的东西，或者是指向一些我可以用作命名基础的理论的指针。

Answer 1

在考虑了这一点之后，这是我们想出的（包装在 Sass 地图中）：

$z-index: (
  'satellite'           :       5000,
  'skyscraper'          :       1000,
  'tower-block'         :       500,
  'house'               :       200,
  'bungalow-chimney'    :       110,
  'bungalow'            :       100,
  'shed'                :       50,
  'postbox'             :       10,
  'curb'                :       1,
  'pavement'            :       0,
  'pothole'             :      -10,
  'ditch'               :      -20,
  'sewer'               :      -100,
  'mine'                :      -300,
  'seabed'              :      -1000
);

然后像这样引用它：

.foo {
  z-index: map-get($z-index, 'pothole');
}

Answer 2

http://en.wikipedia.org/wiki/Structure_of_the_Earth？

外逸层 热层 中层 平流层 对流层 地壳 上地幔 地幔 外核 内核

对你来说够怪异了吗？

Answer 3

我们需要维护项目封面、过滤栏、位置搜索模态、模态上方的自定义下拉菜单和网站导航的堆叠顺序，从下到上。我们可以设置一个 Sass 列表，如下所示：

$elements: project-covers, sorting-bar, modals, navigation;

此列表表示我们希望元素出现的顺序，从最低到最高，数组中的每个索引或位置表示该元素的 z-index。我们可以使用 Sass 索引函数为每个元素分配一个 z-index 值。例如：

.project-cover {
   z-index: index($elements, project-covers);
}

这将打印出：

.project-cover {
   z-index: 1;
}

这是因为 project-cover 是列表中的第一个元素，位于索引 1 处，并且是我们的 z-index 堆叠顺序中的最低元素。让我们为列表中的其余项目编写 Sass：

.sorting-bar {
   z-index: index($elements, sorting-bar);
}
.modal {
   z-index: index($elements, modals);
}
.navigation {
   z-index: index($elements, navigation);
}

现在，我们编译的 CSS 看起来像这样：

.project-cover {
   z-index: 1;
}
.sorting-bar {
   z-index: 2;
}
.modal {
   z-index: 3;
}
.navigation {
   z-index: 4;
}