如何將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邊距頂部-4px放在標題div下進行爬網，但他出現在div1的上方而不是下方。 Z索引設置不同...是Z索引問題還是標題背景不能放在內容上方？

謝謝

Answer 1

z-index屬性僅與定位的元素有關。 解決方案：設置position: relative #header position: relative #header 。 您甚至不需要z-index因為定位的元素始終在未定位的元素上位於頂部。