absolute positioning
The box’s position (and possibly size) is specified with the top, right, bottom, and left properties. These properties specify offsets with respect to the box’s containing block. A absolutely positioned box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.
The element is positioned in reference to the padding box of the containing block that establishes a positioning context. The containing block for a positioned box is established by the nearest positioned ancestor; if there is none, the reference container is the root element. The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport (a window or other viewing area on the screen) and is anchored at the canvas origin
Because the element is positioned in reference to the padding box (not the content box) of the containing block, the default positioning is not the same as if styled with top:0;left:0; unless the edges of the padding box touch the edges of the content box.
To create a mask overlay that does not scroll with the document, either use fixed instead of absolute or style body with position:relative as the initial positioning block is the viewport (styling html would not work in IE).
