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仅更改已定位元素的 z 位置。如果一个元素被定位，那么它将建立一个新的定位上下文，并且它的后代将相对于它进行定位。

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

如果您根本不定位祖先，并且设置 的后代position: relative; z-index: -1，那么您可以（至少在 Chrome 中，我没有进一步测试）将孩子定位在父母后面。不过，这可能会产生不必要的副作用。

Answer 2

当然，您必须为此更改为html结构，

html:-

<div class="container">
<div class="object2"></div>
<div class="object1"></div>
</div>

CSS：-

.container {
    position: relative;
}


.object1 {
    background-image: url("http://farm8.staticflickr.com/7124/8075023996_f61725fac4_n.jpg");
    height: 280px;
    left: 0px;
    position: absolute;
    top: 0;
    width: 320px;
    z-index: -1;
}

.object2 {
    background-image: url("http://farm9.staticflickr.com/8054/8110021320_ebaa03c9b0_s.jpg");
    background-repeat: no-repeat;
    height: 280px;
    position: absolute;
    width: 320px;
    z-index: 20;
}

检查我创建的内容：- http://jsfiddle.net/hJbHR/1/