尝试通过位置等学习 CSS 的更高级功能。使用 CSS Zen Garden 作为指南。
但是，我在一个部分中有我的标题和导航栏。在它下面有一个 Div。
我在 div 周围放置了一个 2px 的蓝色边框，但由于某种原因，它开始在页面上几英里处位于上一节下方。 我这里有一个代码笔: http://codepen.io/anon/pen/WbLwWV
HTML:
<body class="page-wrapper">
<div class="title-section">
<section>
<header>
<h1><img src="header_logo.png" height="61" width="394"></h1>
</header>
<nav class="navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Upcoming Events</a></li>
<li><a href="">Recruitment</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Concerts & Festivals</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Choir in the Community</a></li>
</ul>
</nav>
<div class="header-image"></div>
</section>
</div>
<div class="intro">
<p>The Choir</p>
</div>
</body>
CSS:
body {
font-family: 'Open Sans',Frutiger,"Frutiger Linotype",Univers,Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.25em;
}
.page-wrapper {
}
.title-section {
background: linear-gradient(to bottom, #FFFFFF 0%, #EDF6FF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 480px;
width: 100%;
}
header {
margin: 0 auto;
max-width: 1040px;
position: relative;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
nav {
display: block;
margin: 0 auto;
min-height: 30px;
width: 80%;
}
nav ul {
margin: 0 auto;
}
nav ul li a:hover {
border-bottom: 1px solid #A3E0FF;
border-color: #A3E0FF;
}
.header-image {
background: url("header_photo.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid;
height: 303px;
margin: 0 auto;
width: 800px;
}
.intro {
border-top: 5px solid blue;
height: 500px;
position: relative;
top: 100px;
width: 100%;
}
如果有人能指出正确的方向并解释原因，那就太好了!
谢谢 迈克
最佳答案
它的发生是因为你让你的 .title-section float 到左边，而你的 .intro 有一个相对位置。现在，两者相互重叠，因此文档顶部的蓝色边框。您的 .intro 的内容在 .title-section 之后折叠，因此出现在它旁边。
在这张图片中，您可以看到发生了什么(.title-section 的红色边框，.intro 的蓝色边框):
如果您希望它们像 block 一样堆叠，在相同的布局流程中，请不要 float 标题部分并删除介绍中的 position: relative(请参见 this codepen 的插图)。
我推荐你this article about float以便进一步了解。
关于尽管有 block 属性，HTML 元素仍然重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29146170/