如何在div2下面放置div1并保持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边缘顶部-4px爬到头div下，但他出现在div1以上，而不是div1以下。 z-indexes设置不同...是z-index问题还是标题背景无法定位在内容之上？

谢谢

Answer 1

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