CHAPTER 7 ■ POSITIONING MODELSRelative Float
Problem You want to offset a float from its current position without affecting the position of any
other element, including other floats and inline content. You also want to control the
stacking order of floats in relation to each other and in relation to positioned elements.
Solution You can use position:relative to relatively position a float. A relative float remains in
the normal flow of floats and can be offset from its position in the flow using left and
top. A relative float is rendered in a positioned layer, which allows you to use z-index to
control its stacking order in relation to floats and other positioned elements. Because a
relative float is positioned, absolute descendants can be positioned relative to it.
Pattern SELECTOR { position:relative;
left:±VALUE;
right:±VALUE;
z-index:±VALUE;
float:LEFT_RIGHT;
width:+VALUE;
height:+VALUE;
margin:±VALUE; }
Location This pattern applies to all elements.
Advantages This design pattern allows you to use margin to adjust the position of inline content in
relation to the float. You can then use left and top to adjust the position of the float
without changing the location of the inline content. This gives you great flexibility in
positioning floats.
Without this design pattern, you could not control the stacking order of floats and other
positioned elements—other than controlling their order in the document.
Tip Only position:relative and position:static are compatible with floats. If you assign
position:absolute or position:fixed to a float, the results are undefined, and each
browser handles the situation differently. For example, some versions of Firefox set float
to none and render the element as an absolute element, and Internet Explorer 7 partly
floats and partly positions it.
Example The example contains two relative floats, a static paragraph, and an absolutely positioned
span. Using left and top, you relatively offset each float from its floated position without
affecting the location of the neighboring inline content in the paragraph. Using z-index,
you stack each float and the absolute element in reverse order in comparison to
document order.
Related to Positioned, Static, Absolute, Fixed, Relative, Float and Clear