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/

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

2 个答案: