Mickel Sierra Mickel Sierra - 4 months ago 6
CSS Question

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

please look here and click the on button.

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%;
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?


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.