CHAPTER 7 ■ POSITIONING MODELSRelative
Problems You want to control the stacking order of a float or an element in the normal flow. The
problem is that z-index doesn’t apply to floats or static-positioned elements. Controlling
the stacking order is important when you have positioned elements overlapping floats
and static elements.
You want to position an element so it can be a closest positioned ancestor.
You want to offset an element without removing its place in the normal flow. You don’t
want to change the shape it has in the normal flow. And you don’t want the offset to
change the position of other elements.
Solutions To control the stacking order of an element in the normal flow, you can position it
relatively using position:relative. You can use z-index to set its stacking order in
relation to other positioned elements.
A relative element is positioned without leaving the normal flow and without changing
the shape that it has in the normal flow. For example, if an inline element is wrapped
across one or more lines, it retains this unique layout when relatively positioned. Contrast
this with absolute positioning, which changes an inline element into an absolute box and
reflows the content into the absolute block box, which may change its layout.
You can optionally offset a relatively positioned element from its position in the flow
using left and top. This doesn’t change the position of other elements in the flow. left
and top default to auto, and auto keeps relatively positioned elements in their normal
position in the normal flow.
You can assign position:relative to any element so that absolute descendants can be
positioned relative to it—for details, see Closest Positioned Ancestor in this chapter. You
can use position:relative, left, and top to offset any element—for details, see Offset
Relative in Chapter 8. You can use position: relative to offset and control the stacking
order of floats—for details, see Relative Float in this chapter.
Pattern SELECTOR { position:relative; z-index:+VALUE;
left:auto; top:auto; }
Location This pattern applies to all elements.
Limitations Because of the way Internet Explorer 7 and earlier versions implement hasLayout, relative
inline elements in a positioned block can’t be stacked on top of elements outside the
block. Because of this, Internet Explorer 7 can’t render the relative inline span in the
example in front of the absolute paragraph. This happens because the inline span is
literally contained within the paragraph because the paragraph has layout. This problem
doesn’t occur in other major browsers, and it doesn’t occur in Internet Explorer when the
parent block doesn’t have layout, such as when it’s a static block. This problem has been
resolved in Internet Explorer 8 and 9.
Related to Positioned, Closest Positioned Ancestor, Stacking Context, Atomic, Relative Float; Offset
Relative (Chapter 8)