html - 如何在背景图像上应用 z-index？

Question

代码如下:

<div style="background-image: url(/Images/Main/BackMain.png); z-index: 2">
    <div style="background-image: url(/Images/Main/BackMain1.png); z-index: 1">
    </div>
</div>

上面的代码没有显示BackMain.png在 BackMain1.png 之上这正是我要寻找的。

Answer 1

z-index 仅改变 positioned 元素的 z 位置。如果一个元素被定位，那么它将建立一个新的定位上下文，并且它的后代将相对于它定位。

因此，无法设置元素的 z-index 使其出现在其任何后代的前面。

如果你根本不给祖先定位，而你设置了position: relative;的后代； z-index: -1，然后你可以(至少在 Chrome 中，我还没有进一步测试)将 child 放在 parent 后面。不过，这可能会产生不需要的副作用。