Elements that are relative remain at their original point of origin. In the hierarchy, the header and sections are siblings. Due to its absolute positioning, the header does not affect the layout of other elements. Normally, the first section would occupy the space where the header is positioned but it has been shifted downwards by 100vh. The second section, lacking any specific direction to move, stays in its original position which is at the end of the first section before the vertical shift. To achieve the desired behavior, you can set the top value of the second section equal to the height of the first section.
If you have sibling elements, it is recommended to position them consistently and enclose them within a positioned parent element. In the provided code snippet, I have applied a common practice of using a relative parent with absolute children. Absolute positioning enables an element to be referenced to the closest positioned ancestor. If the closest positioned ancestor happens to be its parent, then the element will align itself with the edges of the parent element.
Enclose all elements within a container and assign position:relative [<main>]
Apply position: absolute to immediate child elements [<section> and <header>]
Set a specific height for each element [section, header {height:100vh}]
Define top:0 for the header (already done)
For the first section, use top:{HEIGHT OF HEADER} (already done) [top:100vh]
The second section should have
top:{HEIGHT OF HEADER + HEIGHT OF 1ST SECTION}
, or if the child is relative, then top:{HEIGHT OF 1st SECTION}. This step was missed in the existing implementation [top:200vh]
SNIPPET(outlines and transparent backgrounds for demo)
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7606030413150505364658405844">[email protected]</a>/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>