Z-index不能与位置设置一起工作

Question

我有两个div。一种是透明的背景栏——它包含一个菜单。另一个包含图像。我想让图像在第一个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;
}