Avoid overlapping divs - html

Question

I have a problem with overlapping <div>s as you can see in the provided snippet (I tried to simplify my code as much as possible). What I want to achieve is, section--red being fixed so section--green and section--blue overlap it when scrolling, with section--blue coming after section--green. Is there any way to achieve this without setting a fixed height on either element? Any input is much appreciated!
.section--red {
position: fixed;
top: 0;
z-index: -1;
height: 100vh;
background-color: maroon;
}
.section--green {
position: relative;
padding-top: 160px;
top: 100vh;
z-index: 2;
}
.section--green:before {
position: absolute;
top: 0;
left: 50%;
z-index: -1;
display: block;
width: 100vw;
height: calc(100% + 160px);
content: "";
background-color: olive;
transform: translate(-50%);
}
.section--blue {
background-color: teal;
}
<div class="section--red">
<h1>Hi!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus turpis sed venenatis euismod. Quisque in eleifend lorem. In hac habitasse platea dictumst. Nunc ligula risus, porta sollicitudin quam lobortis, malesuada hendrerit lectus. Fusce eu lacus sed nunc dignissim efficitur ac sed urna. Nulla magna metus, ultrices in nunc posuere, pretium faucibus nisi. Sed commodo mauris eu mattis condimentum.</p>
</div>
<div class="section--green">
<p>Phasellus eu rhoncus magna. Aliquam facilisis tincidunt nisi vel convallis. Vestibulum varius vestibulum diam vel molestie. Ut fermentum ipsum et cursus vulputate. Suspendisse finibus odio sit amet erat volutpat molestie dignissim ac ante. Aliquam dui enim, congue vel nisi at, molestie iaculis ipsum. Ut varius, mi sed pellentesque congue, turpis mauris aliquam lorem, ac efficitur metus tellus vitae dolor. Suspendisse at ultrices sapien. Donec vestibulum diam vel facilisis ullamcorper. Maecenas tincidunt neque magna, quis gravida est gravida id.</p>
</div>
<div class="section--blue">
<p>Mauris auctor diam mauris, sit amet viverra arcu commodo quis. Curabitur gravida massa arcu, sed vestibulum dolor feugiat eget. Phasellus ipsum massa, consectetur vel libero vitae, semper tempus turpis. Vestibulum a fermentum enim. Mauris ac velit sapien. Sed ut tortor et ante mollis posuere et at ante. Integer tempus purus nec nisi placerat dictum. Praesent faucibus sodales lorem ut ultricies. Mauris suscipit eleifend nisl, malesuada elementum dui imperdiet vitae. Pellentesque pulvinar turpis vitae felis tristique accumsan. Mauris eu massa in mi placerat pharetra. Mauris consequat, mi nec sollicitudin pharetra, nisl quam porta turpis, eget posuere orci nisl vel elit. Integer porttitor fringilla malesuada. Mauris congue magna est, vitae tempus ante facilisis vitae.</p>
</div>

Answer 1

Simply remove position: from elements.
.section--red {
position:fixed;
top: 0;
z-index: -1;
height: 100vh;
background-color: maroon;
}
.section--green {
background-color: green;
margin-top: 100vh;
z-index: 2;
}
.section--green:before {
position:
top: 0;
left: 50%;
z-index: -1;
display: block;
width: 100vw;
height: calc(100% + 160px);
content: "";
background-color: olive;
transform: translate(-50%);
}
.section--blue {
background-color: teal;
display:table-cell;
}
<div class="section--red">
<h1>Hi!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus turpis sed venenatis euismod. Quisque in eleifend lorem. In hac habitasse platea dictumst. Nunc ligula risus, porta sollicitudin quam lobortis, malesuada hendrerit lectus. Fusce eu lacus sed nunc dignissim efficitur ac sed urna. Nulla magna metus, ultrices in nunc posuere, pretium faucibus nisi. Sed commodo mauris eu mattis condimentum.</p>
</div>
<div class="section--green">
<p>Phasellus eu rhoncus magna. Aliquam facilisis tincidunt nisi vel convallis. Vestibulum varius vestibulum diam vel molestie. Ut fermentum ipsum et cursus vulputate. Suspendisse finibus odio sit amet erat volutpat molestie dignissim ac ante. Aliquam dui enim, congue vel nisi at, molestie iaculis ipsum. Ut varius, mi sed pellentesque congue, turpis mauris aliquam lorem, ac efficitur metus tellus vitae dolor. Suspendisse at ultrices sapien. Donec vestibulum diam vel facilisis ullamcorper. Maecenas tincidunt neque magna, quis gravida est gravida id.</p>
</div>
<div class="section--blue">
<p>Mauris auctor diam mauris, sit amet viverra arcu commodo quis. Curabitur gravida massa arcu, sed vestibulum dolor feugiat eget. Phasellus ipsum massa, consectetur vel libero vitae, semper tempus turpis. Vestibulum a fermentum enim. Mauris ac velit sapien. Sed ut tortor et ante mollis posuere et at ante. Integer tempus purus nec nisi placerat dictum. Praesent faucibus sodales lorem ut ultricies. Mauris suscipit eleifend nisl, malesuada elementum dui imperdiet vitae. Pellentesque pulvinar turpis vitae felis tristique accumsan. Mauris eu massa in mi placerat pharetra. Mauris consequat, mi nec sollicitudin pharetra, nisl quam porta turpis, eget posuere orci nisl vel elit. Integer porttitor fringilla malesuada. Mauris congue magna est, vitae tempus ante facilisis vitae.</p>
</div>