Z索引組織策略

Question

在網頁上處理Z索引有什麼好的組織策略？

我正在開發一個單頁面應用程序，由於諸如錯誤消息，加載gif和模態框之類的東西而具有許多圖層，並且我不斷髮現自己的元素在彼此之上時沒有任何視覺感。

是否有一種普遍接受的方法來組織各種元素的z-索引？我已經搜索谷歌和SO，但沒有看到任何似乎足夠一般。

我在我的項目中使用SASS，所以我可以很容易地做基於z-index的基礎，但一般的CSS策略會更好。

Answer 1

我通常更喜歡爲我的頂級元素指定一個大的z-index。我發現最好的方法是通過

• 開始確定哪些要素必須上的其他元素

• 的頂部，因爲你正在使用SASS，你可以指定不同的z-index幾個變量水平：

  .tierBottom { position：[whatever you need]; z-index：1; }

  .tierMiddle { 位置：[無論你需要]; z-index：100; }

  .tierTop {位置：[無論你需要]; z-index：1000; }

• 正如其他一些人所說的，你不應該擔心大部分容器/包裝z-index。如果遇到一些問題，比如內容處於頂端，請將低級別Z-index類添加到違規元素中，並且所有內容都應該與世界一致。

在這方面可能有很多不同的意見，它可能不是一些最好的做法，但這是我過去的工作。希望能幫助到你！