Z-index组织策略

Question

在网页上处理z索引的最佳组织策略是什么？

我正在开发一个单页面的应用程序，该应用程序由于错误消息，加载gif和模式框之类的原因而具有多个层次，并且在没有任何视觉意义时，我会发现自己的元素彼此重叠。

是否有一种普遍接受的方法来组织各种元素的z索引？我已经搜索过Google和SO，但还没有看到任何看起来足够笼统的东西。

我在项目中使用SASS，因此我可以轻松地基于基本z-index进行加法运算，但是一般的CSS策略会更好。

Answer 1

我通常更喜欢为顶级元素指定一个大的 z 索引。我发现的最好的方法是从

• 确定哪些元素必须位于其他元素之上

• 由于您使用的是 SASS，因此您可以为各种 z 索引级别指定一些变量：

  .tierBottom { 位置：[无论你需要什么]; z 索引：1；}

  .tierMiddle { 位置：[无论你需要什么]; z 索引：100；}

  .tierTop{ 位置：[无论你需要什么]; z 索引：1000；}

• 正如其他一些人所说，您不必担心大多数容器/包装器的 z 索引。如果您遇到一些问题，例如内容位于顶部，请将低层 z-index 类添加到有问题的元素中，一切都应该正常。

对此可能有很多不同的意见，对于某些人来说这可能不是最佳实践，但这就是过去对我有用的方法。希望能帮助到你！