html - CSS 帮助 : One div refuses to behave like the other div

Question

我才刚刚开始学习 CSS，我花了很多时间来弄清楚我在这里做错了什么。

我有两个 div，一个带有 Logo 的横幅和主要内容主体。我希望横幅 div 贴在顶部——不是固定的，距离顶部只有零像素。如果我删除横幅 HTML 并在 #content-block 中将 top: 200px 更改为 0px，内容 div 将执行此操作，但横幅 div 拒绝拥抱顶部边缘。

我在这里没有掌握什么？

http://jsfiddle.net/j58agvq1/2/

CSS:

#banner-block {
position: absolute;
top: 0px;
width: 80%;
height: 200px;
margin-left: 10%;
text-align: right;
z-index: 1;
background: rgb(240, 73, 37);
}

#content-block {
position: absolute;
top: 200px;
width: 80%;
height: 100%;
margin-left: 10%;
z-index: 1;
background: rgb(25, 9, 0);
}

HTML:

<!-- Banner Div -->
<p id="banner-block">
    <img src="./images/logo.png" height="200"/>
</p>

<!-- Content Div -->
<div id="content-block">
    <p>This is some content text to test the content block.</p>
</div>

Answer 1

您只需要删除 #banner-block 元素上的默认边距:

margin-top:0;

jsFiddle example