css - 分层

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;
}

任何想法为什么它不起作用？谢谢

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