分層<div></div>

Question

大家好我已經達到了一個磚牆與谷歌:)

我試圖層的一個DIV（#menubar）在另一個（#background）

我的HTML是。 。 。 。 。

<div id="background"></div> 
<div id="menubar"></div> 

而我的CSS是。 。 。 。

#background { 
Width:98%; 
height:1000px; 
position: relative; 
background-color:#878787; 
border-style:solid; 
border-color:#003366; 
border-width:10px; 
z-index:1; 
} 

#menubar { 
top:5; 
left:0; 
Width:50px; 
height:50px; 
position:relative; 
z-index:2; 
background-color:#CCCC99; 
} 

任何想法爲什麼它不工作？ 感謝

詩新的HTML很抱歉的是它的一個愚蠢的問題

這裏是一個小提琴 http://jsfiddle.net/Pv3Tz/

Answer 1

您是否嘗試過給它一個絕對位置？ 編輯您的代碼：

#background { 
Width:98%; 
height:1000px; 
position: relative; 
background-color:#878787; 
border-style:solid; 
border-color:#003366; 
border-width:10px; 
z-index:1; 
} 

#menubar { 
top:5; 
left:0; 
Width:50px; 
height:50px; 
position:relative; 
z-index:2; 
background-color:#CCCC99; 
} 

而且還要檢查這個環節更多：w3schools.com

Answer 2

#background { 
position:absolute; 
} 

底層需要的位置是：絕對的。

Answer 3

使用的位置是：絕對爲你的菜單欄：

#background { 
Width:98%; 
height:1000px; 
position: relative; 
background-color:#878787; 
border-style:solid; 
border-color:#003366; 
border-width:10px; 
z-index:1; 
} 

#menubar { 
top:5px; /* --- Specify with either %, px's, or em --- */ 
left:0; /* --- Specify with either %, px's, or em --- */ 
Width:50px; 
height:50px; 
position:absolute; 
z-index:2; 
background-color:#CCCC99; 
} 

Answer 4

的CSS：

#background { 
    Width:98%; 
    height:1000px; 
    position: relative; 
    background-color:#878787; 
    border-style:solid; 
    border-color:#003366; 
    border-width:10px; 
    z-index:1; 
} 
#menubar { 
    top:5px; 
    left:0; 
    Width:50px; 
    height:50px; 
    position:absolute; 
    z-index:2; 
    background-color:#CCCC99; 
} 

更新小提琴：http://jsfiddle.net/Pv3Tz/1/