z-index不适用于头寸设置

时间:2015-05-20 08:16:59

标签: html css

我有两个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

尝试了各种不同的数字

1 个答案:

答案 0 :(得分:3)

这是因为mastheadimage嵌套在headerwrapper

你需要将它们分开来实现你想要的东西,或许将它们包装在整体父母中。

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

CSS:

.wrapper {
    position:relative;
}