based on this article by:

Table of Contents

  1. About Absolute Positioning
  2. About Fixed Positioning
  3. Containing Blocks
  4. Specify the Dimensions
  5. Specify the Position
  6. Z-Index/Stacking Context

1

2

fixed
ribbon.

3

def: “The block box that the position and dimensions of the absolutely positioned box are relative to.”

Setting position:relative makes that element the containing block for any absolutely positioned descendant/child element.

An absolutely positioned element without a positioned parent makes the html element the “initial containing block”.

  1. Look at the parent element of the absolutely positioned element—does that element’s position property have one of the values relative, absolute or fixed?
  2. If so, you’ve found the containing block.
  3. If not, move to the parent’s parent element and repeat from step 1 until you find the containing block or run out of ancestors.
  4. If you’ve reached the html element without finding a positioned ancestor, then the containing block is the html element.

4

Absolutely positioned elements will shrink-wrap to fit their contents unless you specify the dimensions.

Set the left and right or width properties to specify a width & top and bottom or height to specify the height.

Using percentages makes the elements relative to the dimensions of the containing block.

5

Setting position:absolute on a child element of a containing block, when the containing block has no position of it's own, takes the absolutely positioned element out of the flow.

The browser then becomes the parent element.

6

  • + Higher “z” values are “in front of” lower “z” values.
  • - Negative “z” values position “behind”.
  • Elements with a stacking context have the same point of reference along the z axes.

z-index values can be:

  • an integer, (negative or positive)
  • auto, or
  • inherit.

When there are two elements with the same stacking context and same stack level; the one that occurs later will appear on top.

The Rendering order is as follows:

  1. Background and Borders
  2. Positioned Descendants with negative stack levels.
  3. Block-level descendants in the normal flow.
  4. Floated descendants.
  5. Inline-level descendants in the normal flow.
  6. Positioned descendants with stack level auto or 0.
  7. Positioned descendants with positive stack level.