CSS Positioning

  • Use block elements for CSS positioning. The use of inline elements is not reliable
  • By default, a block-level element with position:absolute shrink-wraps to the size of its content (the minimum width and height needed)
Layout
  • Avoid CSS positioning when possible, as it complicates the layering of elements in IE <= 7
  • Favor using relative position (with no offset) only for establishing the absolute position of a child element
  • Basic layout (where areas do not overlap) can be accomplished without CSS positioning
  • Elements that overlap or appear on top of other elements require CSS positioning
  • For layout elements that move around, CSS positioning is appropriate (when needed, adjust the position so that the element is fully visible)
  • Non-transparent, rounded box corners can be accomplished without CSS positioning (using nested div's with bg images and background-position)
z-index
  • Only applies to absolutely-positioned elements (relative, absolute)
Local stacking context
  • Created for every absolutely-positioned element (relative, absolute) with a z-index set to anything other than auto
  • For IE9- in Quirks mode, or IE7- in any mode, always created for absolutely-positioned elements regardless of z-index setting (even if the z-index property is not specified, or if it's set to auto); the behavior is the same in Quirks mode as well as Almost Standards mode
  • z-index only applies to elements in the same local stacking context
  • If two elements in the same local stacking context have the same z-index, the layering is determined by the html source order
  • An element that creates a local stacking context is not itself in the local stacking context it creates
  • When a child element is not in the same local stacking context as its parent, the child is layered relative to the parent using the z-index of the parent (by definition, a tie); the child always appears on top of the parent, due to the html source order
Clipping of overflow:hidden
  • An absolutely-positioned element is clipped if an ancestor element with a defined width or height has overflow:hidden
Clipping of overflow[-x,-y,]:hidden
  • An absolutely-positioned element is clipped if an ancestor element has overflow[-x,-y,]:hidden
  • Does not matter if the ancestor has an explicit width or height
  • Occurs even if the element is positioned entirely outside of the bounds of the ancestor
  • Affected browsers: FF, IE6/7, Safari 3 (Win), Opera 9
  • Only affects IE6/7 if hasLayout is triggered
Keeping position:absolute content in the flow of the page


top:n

  • If the content above changes in height, it must be in a relative-position element that flows with the content
  • There must not be any preceding content in the relative-position element that changes in height

bottom:n

  • If the content below changes in height, it must be in a relative-position element that flows with the content
  • There must not be any following content in the relative-position element that changes in height
Resources URL: 
notes/css/resources
Sources URL: 
notes/css/sources

See Also