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

【问题标题】：How to place div1 below div2 and keep div1 transparent background?如何将 div1 放在 div2 下面并保持 div1 透明背景？
【发布时间】：2011-09-26 12:36:47
【问题描述】：

<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 边距顶部 -4px 放在标题 div 下爬行，但他出现在 div1 的上方而不是下方。 z-indexes 设置不同...是 z-index 问题还是标题背景无法定位在内容上方？

谢谢

【问题讨论】：

标签： html css transparency z-index

【解决方案1】：

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

【讨论】：