How do I stack div's on-top of eachother(scrolling problem)?

Im currently working on the product landing page project and I’m stuck with trying to extend my webpage and make it scroll downwards.

Ive tried everything I could but nothing worked. Ive managed to contain the banner in the shape that I wanted. however, it is scrolling over the top page. I even tried containing the “first slide” into its own div and setting z-index: 0; .

Problem:: How do I get the banner to stay below the fist initial page. How to I get it to scroll without overlaping.

Here is my work so far (kinda messy:) :
https://codepen.io/daryllagmay/details/qBdGOxg

Hi Daryllagmay,

It looks like you are a bit confused with the CCS position property. By default position is static, meaning the elements will be displayed as they are written in HTML. My advise would be to leave HTML elements positioning as static (you don’t need to write any code for this as it is the default) and then just position the elements you need to - i.e. make the nav ‘fixed’ or ‘sticky’. This will make your life a lot simpler rather than positioning everything based on everything else.

Hope that helps. Happy Coding :slight_smile:

Thanks Sgedye!

Honestly anything helps. Im looking for a sticky nav bar only as you scroll. I really appreciate your time and help!

Keep coding on !