Assignment positioning

Write CSS code (HTML below) to get the result like the screenshots. Only use the positioning property for the layout.

<h1>Donec vel eliquet</h1>
<div class="banner">
    <ul>
        <li><a href="#">Tincidunt</a></li>
        <li><a href="#">Fermentum</a></li>
        <li><a href="#">Amet</a></li>
        <li><a href="#">Consectetur</a></li>
        <li><a href="#">Maecenas</a></li>
    </ul>
</div>
<div class="text">
        <div class="afb1"></div>
        <p class="eerste">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper sed urna tincidunt fermentum. Aliquam a nibh gravida, convallis dui blandit, varius nunc. Morbi ut pretium sem, in convallis risus. Maecenas non tellus eget eros elementum laoreet. Nam mattis euismod libero, sed volutpat elit maximus quis. Nulla sodales urna lectus, vitae iaculis lacus bibendum quis. Aliquam sit amet odio vel ipsum malesuada suscipit. Nulla efficitur euismod nulla pellentesque bibendum. Suspendisse tellus sem, gravida sit amet diam sit amet, eleifend varius tortor.</p>
        <div class="afb2"></div>
        <p class="tweede">Suspendisse nisl quam, ullamcorper nec pretium non, tempor id lectus. Integer aliquam tellus nec lorem porta vestibulum. Integer feugiat posuere feugiat. Fusce posuere vehicula magna, non aliquam odio aliquam ac. Ut pretium nisl eget orci ornare ornare. Integer a libero viverra, venenatis urna vitae, varius turpis. Aenean tristique libero vitae arcu ultricies sagittis. Nam accumsan quam eleifend arcu pharetra dapibus. Ut maximus risus ex, non feugiat purus aliquet sit amet. Duis placerat sem vitae tellus luctus laoreet. Sed tempor rutrum mi vel fermentum. Sed non nulla leo. Sed pulvinar metus eget nibh imperdiet, ut rutrum lorem mollis. Donec vel aliquet sapien. Curabitur commodo augue vel fermentum ornare. Praesent posuere euismod tincidunt.</p>
        <div class="afb3"></div>
        <p class="derde">Vestibulum dapibus, augue quis venenatis interdum, nunc enim fermentum erat, at congue felis diam ac neque. In vulputate leo nisl, quis accumsan felis interdum id. Integer nec tellus in nibh rutrum pellentesque. Nunc ac ornare velit, id semper lacus. Nunc rhoncus bibendum turpis, ac dictum eros interdum dignissim. Quisque finibus pretium tristique. Curabitur diam magna, pretium eget justo eu, mattis maximus nisi. Etiam ut scelerisque dui, ac sagittis purus. Quisque consequat congue blandit. Quisque non nisi quis massa maximus pulvinar. Proin tempor eget purus eget vulputate. Proin interdum vehicula velit, vel gravida odio mattis sit amet.</p>
        <div class="afb4"></div>
        <p class="vierde">Praesent iaculis felis ac libero egestas, eu feugiat velit faucibus. Integer accumsan ultrices laoreet. Vestibulum pretium felis erat, vitae blandit elit suscipit sodales. Nulla id leo ut quam hendrerit fermentum. Mauris id aliquam erat. Pellentesque molestie euismod tempor. In ac odio ut dolor mattis rutrum. Nulla in tempus sem. Curabitur dictum vestibulum justo ac ultrices. Cras non magna convallis, ultricies dolor nec, rutrum libero.</p>
</div>
After scrolling :