6

处理网页上的 z 索引的良好组织策略是什么？

我正在开发一个单页应用程序，由于错误消息、加载 gif 和模式框等原因，它有很多层，当它没有任何视觉意义时，我总是发现自己的元素彼此重叠。

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

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

4

1 回答 1

2

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

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

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

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

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

    .tierTop{ 位置：[随便你]; z 指数：1000；}

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

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

于 2012-11-27T19:01:41.930 回答