Absolute vs Fixed Positioning

Question

I have a custom dialog box which is shown when I click a button. After the dialog box is shown I show a overlay. The height and width of the overlay is 100% x 100%.

Answer 1

Use position:fixed.

http://jsfiddle.net/ryJEW/2/

#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: fixed;
top: 0;
left: 0;
}

Answer 2

position: absolute takes the element out of line with the document. so the height is that of the viewport, and the top,left values are static. Change this to position: fixed and you will see better results.