Z索引不生效？

Question

我正在嘗試使用背景圖像，其頂部帶有div。 所有元素都具有位置屬性，並且我目前已為背景圖像設置了50％的不透明度，以便可以在其后面看到。 div“包裝器”的z索引高於圖片，但仍顯示在后面。 而且它在頁面的底部，我希望它顯示在頁面的頂部，並且高度為100％。

這是我目前所看到的圖像：

如您所見，div位於圖像的后面，只能由於圖像的不透明度而被看到。

任何幫助將不勝感激，謝謝。

Answer 1

子元素的z-index值僅在其父元素的范圍內起作用。 在這種情況下， #wrapper為內部#Page並具有的z-index -1000相對於#home-bg的z-index的2 。

Answer 2

這是因為即使包裝器的Z索引較高，您的#Page容器的Z索引也比圖像低。 父容器的Z優先。

簡單地從#Page中刪除z可能會解決此問題（無需費力就可以對此進行測試，但可以肯定）。

此外，您實際上並不需要所有這些東西。 您可以利用元素的正常堆疊順序，將元素在標記中的較低位置堆疊在較早的元素之上。