Section 21.6. Relative Positioning

21.6. Relative Positioning

Relative positioning works differently than absolute and fixed positioning. The critical difference is that although the element is moved around, the space where it would have appeared in the normal flow is preserved and continues to influence the elements that surround it.

Relatively positioned elements have these characteristics:

• They are declared using {position: relative ;}.

• They are positioned relative to their initial position in the normal flow using one or more of the offset properties (top, right, bottom, left). Properties that are not specified are set to auto (the default).

• Their original space in the document flow is preserved.

• Because they are positioned elements, they can potentially overlap other elements.

This example of a relatively positioned emphasized (em) element demonstrates the basic syntax and behavior of relative positioning (Figure 21-20). Notice that when the element is moved, its space is left behind and the surrounding elements behave as though it is still there.

     em {position: relative; top: -36px; right: -36px; background: #ccc; } 

Figure 21-20. Relative positioning

In relative positioning, the top, right, bottom, and left properties move the element relative to its original position. Specifying a positive value for top moves the element down by that amount. Specifying a value for left moves the element to the right, and so on, such that a positive value for one side is equivalent to a negative value on the opposite side (the computed values are right=-left and bottom=-top).

The CSS 2.1 specification advises that when conflicting values are provided, the provided value for right is ignored in left-to-right languages (left is ignored for right-to-left languages) and is understood to be -left. When top and bottom values conflict, the provided bottom value is ignored and reset to -top. As such, this overconstrained style rule:

     em {top: 10; bottom: 50; left: 50: right -4;} 

would be rendered as though it had specified like this:

     em {top: 10: bottom: -10; left: 50; right: -50;} 

Relative positioning is often used to establish a containing block by specifying the position of the element as relative, but not altering its position. The result is that its child elements can then be absolutely positioned relative to the rectangle created by the element.