Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Offset Relative

Problem

You want to offset an element up, down, left, or right from its position in the normal

flow or floating flow. You want the offset to have no effect on the position of other

elements. And unlike the Offset Absolute and Offset Fixed design patterns, you

want the element to retain the exact shape (size, line breaks, line spacing, and so

on) that it would have had in the normal flow.

Solution

A relative element is a float or static element that is set to position:relative. It’s

initially positioned by the normal or floating flow.

You can use top and left to offset it from this position. Positive values move it

down and right, and negative values move it up and left. Unlike an element’s

margins, relative offsets have absolutely no effect on the position of other elements.

A relative element is rendered in a layer without leaving the flow. This allows you to

overlap elements and control their stacking order using z-index. A relative element

is positioned, which allows absolute descendants to be positioned relative to it. A

relative element is atomic, which means external elements can’t be layered in

between its static descendants, inline content, and its background. If z-index is set

to a nonzero value, a relative element creates its own stacking context, which

means no external elements can be layered between any of its descendants even if

they’re positioned.

Patterns SELECTOR { position:relative; top:±VALUE; left:±VALUE; z-index:+VALUE }

Location This pattern applies to all elements.

Limitations A relative element can’t be absolute or fixed at the same time.

Example

Notice in the example how the inline span retains its shape when offset relatively.

Also notice how the left float is relatively offset to the left by 50 pixels, the sized

static block is offset to the right by 50 pixels, and both are lowered 10 pixels. The

indented static block is raised 32 pixels to fit between the float and the sized static

block.

Related to

Positioned, Closest Positioned Ancestor, Static, Absolute, Fixed, Relative, Relative

Float (Chapter 7); Nested Alignment (Chapter 12); Floating Dropcap, Floating

Graphic Dropcap (Chapter 18); Left Floating Callout, Right Floating Callout, Center

Callout, Block Quote (Chapter 19)