Mickel Sierra Mickel Sierra - 5 months ago 17
CSS Question

Overlay div with position absoulte and height 100% not moving with the scroll

please look here and click the on button.

.darkClass
{
background-color: white;
filter:alpha(opacity=90); /* IE */
opacity: 0.9; /* Safari, Opera */
-moz-opacity:0.9; /* FireFox */
z-index: 2000;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position: absolute;
top: 0;
left: 0;


}

You will see that the overlay div is covering the whole screen as desired, but when I scroll it isn't moving with the scrolling as expected.

I would like to see the grey overlay moving with my scrolling.

what am I missing here CSS-wise?

Answer

You should use position: fixed instead of position: absolute.

It'll position element relative to the browser window and not relative to its first positioned (not static) ancestor element.

Comments