css - Z-index 组织策略

Question

就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the help center为指导。




8年前关闭。




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

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

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

我在我的元素中使用了 SASS，所以我可以轻松地基于基础 z-index 进行加法，但一般的 CSS 策略会更好。

Answer 1

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

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

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

.tierBottom
{
职位:[无论你需要什么]；
z-索引:1；
}

.tierMiddle
{
职位:[无论你需要什么]；
z-索引:100；
}

.tierTop{
职位:[无论你需要什么]；
z-索引:1000；
}

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

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