DIV Overlapping Content - html

Question

I created a div that occupies the whole view-port and want the user to scroll down to see more content but after div, when I created an h1 tag the heading is being overlapped by the div.
What I'm doing wrong?
Link to JSFiddle - https://jsfiddle.net/cycse638/3/
I want it like this - Result expected

Answer 1

About position:absolute
As #Mers stated, when you set position:absolute to an element, that element is taken out of the normal flow. As such, all other items below it will be positioned like there was nothing above them (the result: these items are pushed up the document-- in your case H1 pushes itself up beneath your #background).
As such, you'd want position:relative (which often the default), for your #background, so that it will flow together with the other elements in your page (since you said you want to scroll to your H1).
You said occupy the whole view-port
If you want your upper div to be exactly the height of your viewport, then use 100vh, not 100%, for your height. The difference is that 100% will make it occupy all available space (i.e. everything), while the latter only makes it occupy the length equal to the available screen (i.e. not the entire document).
Editing your fiddle
Okay. so here's your modified fiddle:
https://jsfiddle.net/cycse638/5/
...with CSS modified in consideration of the points above. Go to the fiddle, then scroll down the sample output and you'll see that it looks like what you posted here.
note: You can disregard the flex rules I put in your H1. They're there so that it'll look like the one in your diagram. what's important is your #background is positioned relative, with a height of 100vh.
Hope this helps!

Answer 2

you can either use z-index to lower and raise each element or change the opacity of the div, which will still obscure the header to a degree. or you can simply put the header tag within the div like so: <div id="background"><h1>weadfs</h1></div>
#background {
display: block;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: #eee;
z-index: -1;
}
h1 {
z-index: 1;
}
<div id="background"></div>
<h1>weadfs</h1>
#background {
position: relative;
height: 100vh;
width: 100vw;
background: green;
}
<div id="background"></div>
<h1>weadfs</h1>
#background {
z-index: -1;
position: fixed;
height: 100vh;
width: 100vw;
background: green;
}
h1 {
height: 90vh;
position: relative;
top: 200vh;
}
<div id="background"></div>
<h1>weadfs</h1>