css - レイヤリング

Question

こんにちは、グーグルでレンガの壁にたどり着きました:)

ある div (#menubar) を別の div (#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;
}

なぜうまくいかないのですか？ありがとう

Ps html は初めてなので、ばかげた質問で申し訳ありません

ここにフィドルがあります http://jsfiddle.net/Pv3Tz/

Answer 1

メニューバーに position: absolute を使用します。

#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 2

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/

Answer 3

#background { 
position:absolute;
 }

最下層には position:absolute が必要です。