Basic Concepts - CSS Reference - page 18

Positioning
When elements are positioned, a number of special rules come into play. These rules govern
not only the containing block of the element, but also how it is laid out within that element.

Types of Positioning

Static positioning

The element's box is generated as normal. Block-level elements generate a rectangular
box that is part of the document's flow, and inline-level boxes generate one or more line
boxes that flow within their parent element.

Relative positioning

The element's box is offset by some distance. Its containing block can be considered to
be the area that the element would occupy if it were not positioned. The element retains
the shape it would have had were it not positioned, and the space that the element would
ordinarily have occupied is preserved.

Absolute positioning Absolute positioning

The element's box is completely removed from the flow of the document and positioned
with respect to its containing block, which may be another element in the document or the
initial containing block (described in the next section). Whatever space the element might
have occupied in the normal document flow is closed up, as though the element did not
exist. The positioned element generates a block box, regardless of the type of box it would
generate if it were in the normal flow.

Fixed positioning

The element's box behaves as though set to absolute , but its containing block is the view-
port itself.

The Containing Block
The containing block of a positioned element is determined as follows:

1. The containing block of the rootelement(also called the initialcontainingblock) is estab-
lished by the user agent. In HTML, the root element is the html element, although some
browsers may use body .