Z-index组织策略

Question

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

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

对于如何组织各种元素的z指数，有没有一种普遍接受的方法？我已经搜索了谷歌等，但还没有看到任何一个看起来足够通用。

我在我的项目中使用SASS，所以我可以很容易地基于基本的z索引进行添加，但一般的CSS策略会更好。

Answer 1

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

• 确定必须位于其他元素之上的元素
• 由于您使用的是SASS，因此可以为各种z索引级别指定一些变量：

.tierBottom {位置:您需要的一切；z索引: 1；}

.tierMiddle {位置:您需要的一切；z索引: 100；}

.tierTop{ position: most need；z-index: 1000；}

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

关于这一点可能有很多不同的观点，对于一些人来说，这可能不是最好的做法，但这是过去对我有效的做法。希望它能帮上忙！