CSS Positioning
Review the W3C CSS standard recommendation.Inline boxes are wrapped as needed, moving down to a new line when the available width is exceeded. This can cause some ugly visuals if borders are used as seen below.
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
According to the standard, the two bordered segments above should display only three sides. No one said standards were pretty.
Relative Positioning
When an element specifies position:relative; it is initially
positioned following the normal flow rules. Surrounding boxes are positioned
accordingly. Then, the box is moved according to its offset properties.
Note that the surrounding boxes above are positioned normally, including the collapsing of vertical margins, and that the repositioned box may overlap other boxes.
Browsers may differ in how they handle the display of relatively positioned elements when they overlap other content. Unfortunately, the standards specification appears unclear in how this should be dealt with.
Some, like Internet Explorer 5.5 and Netscape 6.0, will display the positioned element in front of all its siblings. Others, like Opera 5.0, use the default stacking order and will display it in front siblings that preceed it in source order but behind siblings that follow.
Stacking order is detailed in the discussion on absolute positioning. But
note that you can use the z-index style property to explicitly
set the stacking order for relatively positioned elements.
The offset values are specified using a combination of the top, right,
left and bottom style properties. The value of each is
interpreted as the distance the box's corresponding outer edge should be moved
with respect to its original position in the normal flow.
Note that opposing offsets are constrained. For example, if you specify
both left and right and the value of one is not the
exact negative of the other, the right setting will be
ignored. A specific width setting may also cause an offset to be
ignored. The same is true of the top, bottom and
height properties.
In practice, you'll probably want to specify only one of left
and right and one of top and bottom.
Descendant Positioning
Relatively positioned elements may or may not establish a new containing block for positioned (relative or absolute) descendant elements. They follow the same rules as non-positioned elements.
If the relatively positioned element is a block element, it establishes a new containing block. Positioned elements within it will use the "offset" position of that element as a base for positioning. In other words, the offsets of descendant elements are compounded.
If the relatively positioned element is an inline element, its offsets are not combined with the offsets of its positioned descendants. Instead they are based on the same containing block used by the relatively positioned element.
The original standards specification declared that relatively positioned elements always created a new containing block. However, later corrections to the standard changed this to state that such boxes follow the rules of non-positioned elements.
Some browsers incorporate this correction but others do not. Due to these disparities, you may wish to avoid such situations or always use block elements for relative positioning.
Floats
Floating is achieved by setting the float property on an
element's style to either left or right. Special
rules apply to floated elements.
When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.
The illustration below shows the result of code like the following, where a floated element is defined as part of inline text (margin, border and padding styles have been omitted for brevity).
<p> <span style="float:right;width:40%;">content...</span> content content content content content content content content... </p>
The float property can be set to one of left, right,
none or inherit.