O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

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 viewport itself.

The Containing Block

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

  1. The containing block of the root element (also called the initial containing block) is established by the user agent. In HTML, the root element is the html element, although some browsers may use body.

  2. For nonroot elements, if an element’s position value is relative or static, its containing block is formed by the content edge of the nearest block-level, table-, cell-, or inline-block ancestor box. Despite this rule, relatively positioned elements are still simply offset, not positioned with respect to the containing block described here, and statically positioned elements do not move from their place in the normal flow.

  3. For nonroot elements that have a position value of absolute, the containing block is set to the nearest ancestor (of any kind) that has a position value other than static. This happens as follows:

    1. If the ancestor is block-level, the containing block is that element’s outer padding edge; in other words, it is the area bounded by the element’s border.

    2. If the ancestor is inline-level, the containing block is set to the content edge of the ancestor. In left-to-right languages, the top and left of the containing block are the top and left content edges of the first box in the ancestor, and the bottom and right edges are the bottom and right content edges of the last box. In right-to-left languages, the right edge of the containing block corresponds to the right content edge of the first box, and the left is taken from the last box. The top and bottom are the same.

    3. If there are no ancestors as described in 3a and 3b, the absolutely positioned element’s containing block is defined to be the initial containing block.

Layout of Absolutely Positioned Elements

In the following sections, these terms are used:

Shrink-to-fit

Similar to calculating the width of a table cell using the automatic table layout algorithm. In general, the user agent attempts to find the minimum element width that will contain the content and wrap to multiple lines only if wrapping cannot be avoided.

Static position

The place where an element’s edge would have been placed if its position were static.

Horizontal layout of absolutely positioned elements

The equation that governs the layout of these elements is:

left + margin-left + border-left-width + padding-left + 
width + padding-right + border-right-width + 
margin-right + right + vertical scrollbar width (if any) = 
width of containing block

The width of any vertical scrollbar is determined by the user agent and cannot be affected with CSS.

For nonreplaced elements, the steps used to determine horizontal layout are:

  1. If all of left, width, and right are auto, first reset any auto values for margin-left and margin-right to 0. Then, if direction is ltr, set left to the static position and apply the rule given in step 3c. Otherwise, set right to the static position and apply the rule given in step 3a.

  2. If none of left, width, and right is auto, pick the rule that applies from the following list:

    1. If both margin-left and margin-right are set to auto, solve the equation under the additional constraint that the two margins get equal values.

    2. If only one of margin-left or margin-right is set to auto, solve the equation for that value.

    3. If the values are overconstrained (none is set to auto), ignore the value for left if direction is rtl (ignore right if direction is ltr) and solve for that value.

  3. If some of left, width, and right are auto, but others are not, reset any auto values for margin-left and margin-right to 0. From the following list, pick the one rule that applies:

    1. If left and width are auto and right is not, the width is shrink-to-fit. Solve the equation for left.

    2. If left and right are auto and width is not, then if direction is ltr, set left to the static position (otherwise, set right to the static position). Solve the equation for left (if direction is rtl) or right (if direction is ltr).

    3. If width and right are auto and left is not, the width is shrink-to-fit. Solve the equation for right.

    4. If left is auto and width and right are not, solve the equation for left.

    5. If width is auto and left and right are not, solve the equation for width.

    6. If right is auto and left and width are not, solve the equation for right.

For replaced elements, the steps used to determine horizontal layout are:

  1. Determine the value of width as described for inline replaced elements (see Inline Layout).

  2. If both left and right are set to auto, then if direction is ltr, set left to the static left position. If direction is rtl, set right to the static right position.

  3. If either or both of left and right are set to auto, reset any auto values for margin-left and margin-right to 0.

  4. If neither left nor right is set to auto and both margin-left and margin-right are set to auto, solve the equation under the additional constraint that the two margins get equal values.

  5. If the values are overconstrained (none is set to auto), ignore the value for left if direction is rtl (ignore right if direction is ltr) and solve for that value.

Vertical layout of absolutely positioned elements

The equation that governs the layout of these elements is:

top + margin-top + border-top-width + padding-top + height 
+ padding-bottom + border-bottom-width + margin-bottom + 
bottom + horizontal scrollbar height (if any) = 
height of containing block

The height of any horizontal scrollbar is determined by the user agent and cannot be affected with CSS.

For nonreplaced elements, the steps used to determine vertical layout are:

  1. If all of top, height, and bottom are auto, set top to the static position and apply the rule given in step 3c.

  2. If none of top, height, and bottom is auto, pick the one rule that applies from the following list:

    1. If both margin-top and margin-bottom are set to auto, solve the equation under the additional constraint that the two margins get equal values.

    2. If only one of margin-top or margin-bottom is set to auto, solve the equation for that value.

    3. If the values are overconstrained (none is set to auto), ignore the value for bottom and solve for that value.

  3. If some of top, height, and bottom are auto, but others are not, pick the one rule that applies from the following list:

    1. If top and height are auto and bottom is not, the height is based on the element’s content (as it would be in the static flow). Reset any auto values for margin-top and margin-bottom to 0 and solve the equation for top.

    2. If top and bottom are auto and height is not, set top to the static position. Reset any auto values for margin-top and margin-bottom to 0 and solve the equation for bottom.

    3. If height and bottom are auto and top is not, the height is based on the element’s content (as it would be in the static flow). Reset any auto values for margin-top and margin-bottom to 0 and solve the equation for bottom.

    4. If top is auto and height and bottom are not, reset any auto values for margin-top and margin-bottom to 0 and solve the equation for top.

    5. If height is auto and top and bottom are not, reset any auto values for margin-top and margin-bottom to 0 and solve the equation for height.

    6. If bottom is auto and top and height are not, reset any auto values for margin-top and margin-bottom to 0 and solve the equation for bottom.

For replaced elements, the steps used to determine vertical layout are:

  1. Determine the value of height as described for inline replaced elements (see Inline Layout).

  2. If both top and bottom are set to auto, set top to the static top position.

  3. If the values are overconstrained, ignore the value for bottom and solve for that value.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required