Creating an overlay div isn’t a problem for modern browsers. We can do that easily by specifying the CSS property height: 100%; position: fixed;.

However, position:fixed doesn’t work in IE6, so for IE6 only we have to put position: absolute; height:100%;. This will have no effect until you put height:100%; on a parent element (usually the body tag). That brings us to a strange result, our overlay div covers 100% of a screen, but if the page is scrollable, the rest of the area isn’t covered by overlay div.

The easiest solution is to put fixed height on our div, that equals to the height of the page’s content. So, in IE6 only CSS we have the following: height:expression(document.body.clientHeight + "px");

Overlay divs can be used to blend the background whilst using a modal window.

As per an overlay div, position fixed doesn't work in IE6, so we can’t position our popup-div in a specific place on the page, even if we scroll the content.

What can help us – is recalculating the position every time we scroll the page. So, IE6 only CSS property will be: position: absolute; top: expression(eval(document.documentElement.scrollTop) + "px");

We can add some more offset, let’s say 200 pixels. top: expression(eval(document.documentElement.scrollTop) + 200 + "px");

The only problem we have now is that this popup-div doesn’t scroll smoothly enough. To prevent that we need to fix the background of the body. background-attachment: fixed;. That only works if you have an image as the page’s background.

If you don’t wan’t to fix your page’s background, you can always put a blank.gif as a background for body, and wrap the rest of your page in a wrapper height:100%; width: 100% and define it’s background as it was before on a body tag.