CHAPTER 7 ■ POSITIONING MODELSStatic
Problem You want elements to flow automatically one after the other in lines and blocks so
they fluidly adapt to the size of the user’s display.
Solution You can apply position:static to an element to position an element in the normal
flow. Because this is the default, elements are automatically rendered in the normal
flow. The normal flow consists of nested blocks rendered vertically down the
viewport. Inside a block, one or more blocks or lines are rendered vertically down the
block. Inside a line, text and objects are rendered horizontally across the line. The
starting position of a static element is determined by the previous static element. The
size, padding, borders, and margins of a static element determine the starting
position of the next element.
Patterns Inline Static Element
INLINE-SELECTOR { position:static; line-height:±VALUE;
margin-left:±VALUE; margin-right:±VALUE; }
Block Static Element
BLOCK-SELECTOR { position:static; width:+VALUE; height:+VALUE;
margin-left:±VALUE; margin-right:±VALUE;
margin-top:±VALUE; margin-bottom:±VALUE; }
Location This pattern applies to all elements.^
Example All elements in the example are static. Block elements are rendered in blocks that
flow down from the top. Each block, except for the sized block, is automatically
stretched to the width of its container minus its left and right margins and the
parent’s padding.
The top margin pushes the selected static block element down, and the bottom
margin pushes down the following static block element. Adjacent vertical margins
collapse into each other. The resulting margin is the larger of the two adjacent
margins. In the example, each block has a top and bottom margin of 10 pixels. These
margins collapse so that only a 10-pixel margin exists between them.
You can assign height and width to a static block to create a sized block. Left and/or
right margins assigned to auto expand to compensate for the specified width. You
can center a sized static block element by setting both left and right margins to auto,
as shown in the first block in the example.
The static inline elements in the example have left and right margins of 40 pixels. Left
and right margins push inline elements apart, and they don’t collapse. When the
content of an inline element exceeds the width of its container, a browser wraps it
into a new line. Top and bottom margins are ignored on inline elements because
line-height directs the height of lines.
Related to Absolute, Fixed, Relative; Sized, Stretched, Shrinkwrapped (Chapter 5)