relative containing block

Elements with position:relative are positioned relative to themselves. If we just set position:relative on an element, without specifying any of the edge properties, the element ends up exactly where it would have been if we had set position:static, or if we hadn't set position at all.

But there is one important usage. If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1, not matter they are static/absolute/relative/float(width). Thus, it serves as a container (or containing block).

By definition, the containing block of an absolutely positioned element is its nearest positioned ancestor with position property is absolute, fixed or relative. So if we don't define div-1 as relative positioned, it won't be its containing block.

Note that this is a special definition for absolutely positioned element **only**. The containing block of other elements is any block box (div) surrounding it.

A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible in its containing block.
(float:right doesn't work in IE? ->the element must have width defined)

1. Learn CSS Positioning in Ten Steps
2. Relatively absolute
3. Atlantic CSS ZenGarden