html - 一个接一个地放置一个div

Question

我想像下面这样设置两个 div。 http://snag.gy/ynuiY.jpg

这是我的 HTML 代码

<div id="topbar">
This is a top bar
</div>

<div id="wrapper"> 
wrapper
</div>

这是我的CSS

#wrapper{
    z-index:2;
    marign-top: 30px;
    width:80%;
    height:auto;
    background-color:#FFF;
    left:auto ;
    right:auto ;
    margin: auto;

}

#topbar{
    height:30px;
    width:100%;
    background-color:#333;
    position:absolute;
    top:0px;
    left: 0px;
    right: 0px;
    color:#FFF;
    overflow: hidden;
}

但是输出如下。 (无 wrapper ) http://i.stack.imgur.com/DXuWD.jpg

请帮我解决这个问题。

Answer 1

您必须将 #wrapper 边距更改为填充

JSfiddle Demo

CSS

#wrapper{
    padding-top: 30px;
}