如何将div1放在div2下面并保持div1透明背景？

Question

<div id="header"> Header content </div>
<div id="content"> Content </div>

#header {
    background-image: url("/Content/Images/bg.png");
    background-repeat: repeat-x;
    float: left;
    height: 45px;
    margin: 0;
    width: 960px;
    z-index: 10;
}

#content {
    background-image: url("/Content/Images/separator_shadow_both.png");
    background-repeat: repeat-y;
    float: left;
    margin: -4px 0 0;
    padding: 0 10px;
    width: 940px;
    z-index: 9;
}

标题div的背景高度为45像素 - 41像素纯色，底部4像素为透明阴影。我希望这个阴影能够显示在内容之上。我把内容div margin-4px放在标题div下面，但是他出现在div1下面而不是div1下面。 z-index设置不同......是否z-index问题或标题背景不能定位在内容之上？

谢谢

Answer 1

z-index属性仅与定位的元素相关。 解决方案：在position: relative上设置#header。您甚至不需要z-index，因为定位元素总是在非定位元素的顶部呈现。