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
• In IE6/7, 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