Html 如何在背景图像上应用z索引？

代码如下：

<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>

---

上面的代码没有显示在我正在寻找的

BackMain1.png

之上的

BackMain.png

。

当然你必须更改为html结构

html:-

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

.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;
}

---

检查我创建的内容：-

z-index

仅更改定位元素的z位置。如果一个元素被定位，那么它将建立一个新的定位上下文，并且它的子元素将相对于它定位

因此，无法设置元素的

z-index

，使其显示在其任何子元素前面

---

如果您根本不定位祖先，并且设置

位置的后代：relative；z-index:-1

，然后您可以（至少在Chrome中，我没有进一步测试它）将子对象定位在父对象后面。不过，这可能会产生不必要的副作用。

这是在我的母版页中，因此我无法编辑它，因为我需要的所有页面都是从母版页继承的。除了颠倒这两个页面的顺序，我可以应用任何其他方法。如果你知道答案，你能编辑你的答案吗？你的答案仍然不起作用。。我必须在类内手动反转url或反转div，这是我无法通过跨浏览器支持实现的。浏览器对负z索引的支持应该包括过去10年中几乎所有的浏览器。