fundamentals of CSS :: 2018-01-31 22:41:02

Positioning schemes

In CSS2, a box may be laid out according to three positioning schemes:

  1. Normal flow. In CSS2, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of compact and run-in boxes.
  2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
  3. Absolute positioning. In the absolute positioning model, a 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.

The ‘position’ and ‘float’ properties determine which of the CSS2 positioning algorithms is used to calculate the position of a box.

static The box is a normal box, laid out according to the normal flow. The ‘left’ and ‘top’ properties do not apply.

relative The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.

absolute The box’s position (and possibly size) is specified with the ‘left’‘right’‘top’, and ‘bottom’ properties. These properties specify offsets with respect to the box’s containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed The box’s position is calculated according to the ‘absolute’ model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn’t move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example). Authors may wish to specify ‘fixed’ in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page. The two specifications may be separated by using an @media rule.

Box offsets‘top’‘right’‘bottom’‘left’ – An element is said to be positioned if its ‘position’ property has a value other than ‘static’. Positioned elements generate positioned boxes, laid out according to four properties.

Containing blocks

In CSS2, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box “establishes” the containing block for its descendants. The phrase “a box’s containing block” means “the containing block in which the box lives,” not the one it generates.

« »