CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNEDOffset Absolute and Offset Fixed
Problem You want to remove an element from the normal flow and offset it from the
position it would have had in the flow. Unlike the Offset Relative design pattern,
you don’t want the element to retain the exact shape it would have had in the
normal flow. Instead, you want it to be rendered as a block that can be sized or
shrinkwrapped. You optionally want the element to be fixed to the viewport so it
doesn’t scroll when the document scrolls.
Solution Use position:absolute to position the element absolutely or
position:fixed to lock its position so it doesn’t scroll with the document.
Don’t set left, right, top, or bottom to a value other than auto, or you’ll align
the element to its closest positioned ancestor. Because auto is their default
value, you can omit left, right, top, and bottom.
Use margin-top and margin-left to offset the element from the position it
would have had in the normal flow. Positive values move it down and right, and
negative values move it up and left. You can use width:auto or height:auto to
shrinkwrap the element, or you can use width:+VALUE or height:+VALUE to size
it.
Patterns Shrinkwrapped-offset Absolute Element
SELECTOR { position:ABSOLUTE_FIXED;
height:auto; width:auto;
margin-top:±VALUE; margin-left:±VALUE; }
Sized-offset Absolute Element
SELECTOR { position:ABSOLUTE_FIXED;
height:+VALUE; width:+VALUE;
margin-top:±VALUE; margin-left:±VALUE; }Location This pattern applies to all elements.^
Advantages This pattern allows you to remove an element from the normal flow, shrinkwrap
or size it, and then offset it from the position it would have had in the normal
flow. Contrast this with the Aligned and Offset Absolute design pattern, where
an absolute element is aligned and offset from an edge of its closest positioned
ancestor.
Tips The horizontal and vertical dimensions are independent. You can shrinkwrap
one dimension and size the other. You can also align one dimension to an edge
of the closest positioned ancestor and offset the other dimension from the
position it would have had in the normal flow.
Example Notice how both the absolute and the fixed spans are located in the flow where
they would have been located if they were not positioned. Margins vertically and
horizontally offset the fixed span by 10 pixels.
Related to Aligned and Offset Absolute; Sized, Shrinkwrapped (Chapter 5); Margin (Chapter
6); Positioned, Closest Positioned Ancestor, Absolute, Fixed (Chapter 7)