Z-Index 不生效？

Question

我正在尝试使用背景图片，顶部有 div。所有元素都有位置属性，我目前给背景图像设置了 50% 的不透明度，以便我可以看到它的后面。 div 'wrapper' 的 z-index 高于图像，但仍出现在后面。它也位于页面底部，我希望它出现在顶部并且如果为 100% 则具有高度。

这是我目前看到的图像：

如您所见，div 位于图像后面，由于图像不透明，因此只能看到。

任何帮助将不胜感激，谢谢。

Answer 1

这是因为您的 #Page 容器的 z-index 低于图像，即使包装器的 z-index 更高。父容器的 Z 优先。

只需从#Page 中删除 z 就可能会解决问题（无需进行测试，但可以肯定）。

此外，您实际上并不需要在所有这些东西上使用 z。您可以利用元素的正常堆叠顺序，将标记中较低的元素堆叠在较早的元素之上....

Answer 2

子元素的z-index 值仅在其父元素的范围内起作用。在这种情况下，#wrapper 位于 #Page 内部，并且相对于 #home-bg 的 z-index 为 2 的 z-index 为 -1000。