Z指数组织策略

Question

在网页上处理z-indices的良好组织策略是什么？

我正在开发一个单页应用程序，由于错误消息，加载GIF和模态框等内容而具有多个层次，并且当它没有任何视觉感觉时，我一直发现自己的元素在彼此之上。

是否有一种普遍接受的方法来组织各种元素的z指数？我搜索过google和SO，但是还没有看到任何看似普遍的内容。

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

Answer 1

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

开始

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

• 因为您正在使用SASS，所以您可以为各种z-index级别指定一些变量：

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

  .tierMiddle { 职位：[无论你需要什么]; z-index：100; }

  .tierTop { 职位：[无论你需要什么]; z-index：1000; }

• 正如其他一些人所说，你不必担心大多数容器/包装器z-index。如果你遇到一些问题，比如内容在最上面，那么将低层z-index类添加到有问题的元素中，所有这些都应该与世界一致。

对此可能有很多不同的意见，对某些人来说可能不是最好的做法，但这是过去对我有用的。希望它有所帮助！