A CSS box, inside a document tree, may be positioned or laid out in one of the three possible schemes.

These are:

  • normal flow; normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes and relative positioning of both;
  • floats; floating elements are taken out of the normal flow and shifted to the left or right from it (as far as possible), appearing as a they are floating around;
  • absolute positioning; absolutely positioned boxes are taken out of the normal flow completely and has no relationship to other elements inside the normal flow.

Position property

To assign a positioning scheme to an element, the position property is used, however the float property is used to determine whether an element is a "floating" element or not.

The position property contains following information:

  1. value: static, relative, absolute, fixed or inherit;
  2. initial: static;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

Here are the explanations of the value types:

  • static value leaves a box laid out according to the normal flow; the top, right, bottom and left properties do not apply;
  • relative value calculates a box's position according to the normal flow with a relevance to the position of the previously laid out box and its position offsets;
  • absolute value positions a box according to its top, right, bottom and left properties and regardless to other previously laid out box's positions or positions of other siblings, and it does not affect them as well; the margins of such boxes are not collapsible;
  • fixed value positions a box according to the same rules as the absolute value with the difference that this value type leaves a box fixed in reference to other boxes and the viewport, meaning that with the scrolling the fixed box does not change its position and appears constantly where initial told.

Top, right, bottom and left properties

The properties used for offsetting a box's position are top, right, bottom and left:

  1. value: <length>, <percentage>, auto or inherit;
  2. initial: auto;
  3. applies to: positioned elements;
  4. inherited: no;
  5. percentages: top and bottom - refer to the height of containing block; right and left - refer to the width of containing block;
  6. media: visual;
  7. computed value: if specified as 'length', value is absolute length; if specified as percentage, value is as specified; otherwise value is 'auto'.

In the case of absolute positioning the top property specifies how far is the box's top margin edge below the top edge of the containing block while in the normal flow it specifies the top offset with the respect to the top edges of the box itself. Other position offset properties have same rules applied, except the fact that the right property defines the offset to the left of the right edge of the box's containing block, the bottom property defines the offset above the bottom of the box's containing block and the left property specifies the offset to the right of the left edge of the box's containing block.

As far as the value types go, the value length represents a fixed distance, the value percentage represents a percentage of the containing block's width in case of properties left and right or containing block's height in case of properties top and bottom. Negative values are allowed. The value auto is not well defined and it depends on the positions and proportions of other boxes around, as well as the proportions (width, height) of the box itself.

Example

CSS position property example:

 

›› go to examples ››