Menu
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
To hide the scrollbar and disable scrolling, we can use the CSS overflow property. This property determines what to do with content that extends beyond the boundaries of its container. To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element.
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
You can also use position absolute as well as set all the viewport sides (top, right, bottom, left) to 0px will make the div take the full screen.
position: fixed; on the overlay.
Change #overlay position:absolute to position:fixed
This happens because the #overlay position: absolute is relative to the <html> and using it's dimensions, which is only the viewport height.
To make sure that the #overlay uses the dimensions of whole page, you could use position: relative; on the <body> (but you will need to remove the min-height: 100% and height: 100% on the <body> first because this makes it use the viewport size). The #overlay will then use the <body> dimensions and fill the entire page.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With