Question

我刚刚开始学习CSS，并且正在努力确定我在这里做错了什么。

我有两个div，一个带有徽标的横幅和主要内容正文。我希望横幅div坚持到顶部 - 不固定，从顶部只有零像素。如果我移除横幅HTML并将top: 200px更改为#content-block中的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

Answer 2

上面首先给出了j08691的回答，但我想在这种情况下给你一个提示。在这种情况下，只需在通常称为Web Inspector的浏览器中打开您的开发人员面板（如果您不知道可以通过右键单击文档找到它）。然后选择让你头疼的元素，然后在右边你会看到像＆＃34; metrics＆＃34;是Safari和＆＃34; Box Model＆＃34;在Firefox和其他浏览器中，您可以进行一些搜索，并且在任何浏览器中选择节点（元素）后该选项应该在右侧。在这里，您可以检查填充，边框，边距是如何给你的盒子（在你的情况下为div）。如果你检查你的页面，你会发现有一个保证金在顶部，所以你可以在CSS中margin-top:0px做所有。希望它有所帮助！

Answer 3

希望它能帮到你

＆＃13;

#banner-block {
    position: absolute;
    top: 0px;
    width: 80%;
    height: 200px;
    margin-left: 10%;
     margin-top:0;
	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);
}

＆＃13;

<body>
    <!-- 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>
</body>

＆＃13;

CSS帮助：一个div拒绝表现得像其他div一样

3 个答案: