分层<div> </div>

Question

大家好我已经用google :)到达了一堵砖墙。

我试图将一个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;
}

任何想法为何不起作用？ 谢谢

Ps是html的新手，很遗憾，这是一个愚蠢的问题

这是一个小提琴 http://jsfiddle.net/Pv3Tz/

Answer 1

#background { 
position:absolute;
 }

底层需要位置：绝对。

Answer 2

对你的菜单栏使用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 3

的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 4

你试过给它一个绝对的位置吗？ 将代码编辑为：

#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