嵌套div的重叠背景图像

Question

在嵌套div中有背景图像，如下所示

<div id="templatemo_content" style="padding: 30px 30px 0 0; background: #fff url(images/foot_bg.png) no-repeat 0 bottom; z-index:10">
this div has grey colored background image
<div style="background:url(images/job.png) no-repeat 0 0; height:131px; z-index:5">
this is a nested div with another background image having right bottom overlapping grey colored image
</div>
</div>

下面的图片是我到目前为止所取得的成果，但是，预期的图像是下面的第二个

对两个图像使用了z-index，但是通过互联网浏览发现z-index对背景图像不起作用。请提出解决方案

Answer 1

您还需要设置

    position: relative;

因此，z-index将 - 应该 - 有效。

Answer 2

z-index相对于设置了z-index的父容器。因此，儿童在下方显示时不能低于其父级{。}}。

您可能想要更改HTML

z-index

CSS（需要进行一些更改）

<div>
    <div>this is a nested div with another background image having right bottom overlapping grey colored image</div>
    <div>this div has grey colored background image</div>
</div>