Question

尝试使用CSS Zen Garden作为指南，学习CSS的更高级功能。

但是，我的标题和导航栏位于一个部分。在它下面有一个Div。

我在div周围放了一个2px的蓝色边框，但出于某种原因，它在上一节下方的页面上方开始向上。我在这里有一个codepen： 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 &amp; 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%;
}

如果有人能指出我正确的方向并解释原因，那就太棒了！

由于麦克

Answer 1

这种情况正在发生，因为你的.title-section向左浮动，而你的.intro有相对位置。现在，两者都相互重叠，因此文档顶部的蓝色边框。并且.intro的内容在.title-section之后崩溃，因此出现在它旁边。

在此图片中，您可以看到发生的情况（.title-section的红色边框，.intro的蓝色边框）：

What happens now

如果您希望它们像块一样堆叠，在相同的布局流程中，请不要浮动标题部分并删除介绍中的position: relative（有关插图，请参阅this codepen）。

我建议您this article about float进一步了解。

尽管块属性，HTML元素重叠

1 个答案: