这是一种可笑的基本方式，但我正在努力安排相对定位的div。
我有一个100vh高的绝对标题，包含标题和标题，后跟两个部分元素，两个都是相对的。第一个是＆＃34; top＆＃34;值为100vh，将其置于标题下方。我假设的第二个只是遵循第一个，但它将自己附加到标题标题。
我已将页面提炼成一个片段以演示问题。
/* -------------------- UNIVERSAL TYPES -------------------- */
section {
position: relative;
width: 100%;
padding: 40px 0;
}
/* -------------------- HEADER -------------------- */
header {
position: absolute;
height: 100vh;
width: 100%;
background: #111111;
top: 0;
}
header .content {
width: auto;
max-width: 500px;
padding: 10px;
margin: 0 auto;
margin-top: 40vh;
text-align: center;
color: #ffffff;
}
header .content .headline {
font-size: 100px;
margin-bottom: 0px
height:100px;
margin-bottom: 20px
}
header .content .caption {
position: relative;
display: block;
font-size: 20px;
}
/* -------------------- UNIVERSAL CONTENT -------------------- */
.pagecontent {
position: relative;
width: 1000px;
margin: 0 auto;
padding: 30px;
}
.pagecontent h2 {
font-size: 80px;
}
.pagecontent p {
display: block;
width: 100%;
font-size: 20px;
}
/* -------------------- INDIVIDUAL SECTIONS -------------------- */
#About {
top: 100vh;
background-color: #CCC;
color: #333333;
}
#Portfolio {
background-color: #333;
color: #CCC;
}<head>
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
</head>
<body>
<header>
<div class="content">
<div class="headline">Header.</div>
<div class="caption">Caption on dark background. This header section is 100vh tall and positioned absolutely.</div>
</div>
</header>
<section id="About">
<div class="pagecontent">
<h2> About section header </h2>
<p>All subsequent sections, starting with this one, are relative. My problem is that this section is obscured by the "Portfolio" section, which refuses to add on to the end of the page, and instead inserts itself immediately following the header caption. Duis aliquam finibus sagittis.</p>
</div>
</section>
<section id="Portfolio">
<div class="pagecontent">
<h2>Portfolio section header.</h2>
<p>This section refuses to add on to the end of the page, and instead inserts itself immediately following the header caption.</p>
</div>
</section>
</body>
同样，我知道这可能有一个非常简单的解决方案（我现在对现代CSS来说仍然很新），但我已经摸不着头脑了。
答案 0 :(得分：1)
这是因为position: absolute属性会从默认渲染的主流中删除内容，并将其放置在您放置位置的位置。正因为这个原因，第二个元素无法识别前一个元素并从原始位置开始。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #fff;
font-size: 20px;
}
header {
height: 200px;
background: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
section {
position: relative;
top: 200px;
height: 300px;
background: blue;
}<header>This is absolute</header>
<section>This is Relative but aligned by giving TOP: 200px<br>Just to tell where RED DIV ends</section>
答案 1 :(得分：0)
试试这个。 .content是绝对的，意味着它已从文档流中删除，使其他元素覆盖或落后于它
body {
padding-top: 100vh;
}
#About {
background-color: green;
color: #333333;
}
答案 2 :(得分：0)
相关元素处于其原始起源点。标题和部分是兄弟姐妹。标题是绝对的，因此就其他元素而言并不存在。第一部分通常会占据标题所占据的空间，但它会向下移动100vh。第二部分没有指示去，因此它停留在它最初占据的位置，该位置在第一部分的末尾，然后移动100vh 。因此，如果您为第二部分top指定第一部分的高度值，它应该按照您的意愿运行。
但是如果你有兄弟姐妹，你应该将它们全部放在一起并将它们包裹在一个定位的元素中。在Snippet中，我创建了最常用的类型，包括相对父级和绝对子级。绝对将自己引用到最接近的定位元素。因此，如果最接近定位的元素恰好是它的父元素，那么它将自己引用到所述父元素的边缘。
将所有内容包装在容器中并提供position:relative [<main>]
立即给予后代（即儿童）position: absolute [<section>和<header>]
给每个人一个高度[section, header {height:100vh}]
提供标题top:0（你做过）
指定第一部分top:{HEIGHT OF HEADER}（你做了）[top:100vh]
第二部分应为top:{HEIGHT OF HEADER + HEIGHT OF 1ST SECTION}，或者如果孩子为relative，则为top:{HEIGHT OF 1st SECTION}（您未执行此操作）[top:200vh]
SNIPPET （演示的概述和透明背景）
html,
body {
height: 100%;
width: 100%;
font: 400 16px/1.5 Verdana;
overflow: scroll;
}
* {
box-sizing: border-box
}
/* -------------------- UNIVERSAL TYPES -------------------- */
section {
position: absolute;
width: 100%;
height: 100vh;
padding: 40px 0;
margin: 0 auto;
outline: 8px solid blue;
}
main {
position: relative;
height: auto;
min-height: 100vh;
outline: 10px solid gold;
}
/* -------------------- HEADER -------------------- */
header {
position: absolute;
width: 100%;
background: rgba(20, 20, 20, .1);
top: 0;
outline: 5px dashed gold;
height: 100vh;
}
header .content {
width: auto;
max-width: 500px;
padding: 10px;
margin: 0 auto;
/*margin-top: 40vh;*/
text-align: center;
color: tomato;
outline: 3px dotted red;
}
header .content .headline {
font-size: 100px;
margin-bottom: 0px height:100px;
/*margin-bottom: 20px;*/
outline: 3px dotted blue;
}
header .content .caption {
position: relative;
font-size: 20px;
outline: 3px dotted green;
}
/* -------------------- UNIVERSAL CONTENT -------------------- */
.pagecontent {
position: absolute;
width: 1000px;
margin: 0 auto;
padding: 30px;
outline: 5px dashed brown;
}
.pagecontent h2 {
font-size: 80px;
outline: 5px dotted cyan;
}
.pagecontent p {
width: 100%;
font-size: 20px;
outline: 3px solid lime
}
/* -------------------- INDIVIDUAL SECTIONS -------------------- */
#About {
top: 100vh;
background-color: rgba(111, 111, 111, .1);
color: #ff0000;
outline: 5px solid red;
}
#Portfolio {
top: 200vh;
background-color: rgba(51, 51, 51, .1);
color: purple;
outline: 5px double purple;
}<head>
<!--<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">-->
</head>
<body>
<main>
<header>
<div class="content">
<div class="headline">Header.</div>
<div class="caption">Caption on dark background. This header section is 100vh tall and positioned absolutely.</div>
</div>
</header>
<section id="About">
<div class="pagecontent">
<h2> About section header </h2>
<p>All subsequent sections, starting with this one, are relative. My problem is that this section is obscured by the "Portfolio" section, which refuses to add on to the end of the page, and instead inserts itself immediately following the header
caption. Duis aliquam finibus sagittis.</p>
</div>
</section>
<section id="Portfolio">
<div class="pagecontent">
<h2>Portfolio section header.</h2>
<p>This section refuses to add on to the end of the page, and instead inserts itself immediately following the header caption.</p>
</div>
</section>
</main>
</body>