分层 <div></div>答案

【问题标题】：Layering <div></div>分层 <div></div>
【发布时间】：2013-08-16 16:49:54
【问题描述】：

大家好，我已经用谷歌达到了砖墙:)

我正在尝试将一个 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/

【问题讨论】：

使用位置：绝对，而不是位置：相对。
附带说明，不要忘记使用单位。 top:5; left:0; 没有它们就没有任何意义。

标签： css html layer

【解决方案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

【讨论】：

已排序，谢谢我在尝试绝对位置时一定错过了 px
是的，也许这是个问题！

【解决方案2】：

#background { 
position:absolute;
 }

底层需要position:absolute。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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/

【讨论】：