Избегайте перекрытия div

Question

У меня проблема с перекрытием <div> s, как вы можете видеть в предоставленном фрагменте (я попытался максимально упростить свой код). Я хочу добиться, чтобы section--red было исправлено, поэтому section--green и section--blue перекрывают его при прокрутке, а section--blue идет после section--green. Есть ли способ добиться этого без установки фиксированного height для любого элемента? Приветствуется любой вклад!

.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

Просто удалите position: из элементов.

.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>