Z索引不适用于位置设置

Question

我有两个div。 一个是具有背景透明性的栏-其中包含一个菜单。 另一个包含图像。 我希望图像位于第一格的后面。 我无法获得z-index来执行此操作：

<div id="headerwrapper">
    <div class="mastheadimage"><img src="....." /></div>
    ...more code
</div>

css
#headerwrapper {
position:relative;
z-index:10;
background-color:rgba(59, 59, 59, 0.3);
}

.mastheadimage {
position:absolute;
z-index:-1; 
}

我为-1尝试了各种不同的数字

Answer 1

这是因为mastheadimage嵌套在headerwrapper 。

您需要将它们拆分以实现所需的功能，也许将两者包装在一个整体中。

<div class="wrapper">
    <div id="headerwrapper">...more code</div>
    <div class="mastheadimage"><img src="....." /></div>
</div>

CSS：

.wrapper {
    position:relative;
}