Absolute Positioning

You can absolutely define the vertical and horizontal position of a box using CSS. An absolutely positioned box is taken out of the document flow and does not affect the positioning of any other element on the page except for descendant boxes.

BOX B absolutely positioned boxes are positioned relative to the nearest positioned ancestor element. If there is no such ancestor element the box is positioned relative to the initial containing block, the browser's view port.

BOX C This box is absolutely positioned to be 300 pixels from the top and 300 pixels from the left of its nearest positioned ancestor, which is the browser window in this case.

Box C-1 This is an absolutely positioned box inside another absolutely positioned box.

BOX D In the document structure, the box above this is the absolutely positioned box, BOX C. As you can see BOX C has no affect on the placement of BOX D, since BOX C is removed from the document flow.