CHAPTER 7 ■ POSITIONING MODELSPositioning Models
Introduction This isn’t a design pattern, but an introduction to positioning.
CSS provides six positioning models for positioning an element: static, absolute, fixed,
relative, float, and relative float. The six positioning models are related to the six box models,
but they aren’t the same. The static positioning model can position inline, inline-block,
block, and table boxes. The absolute and fixed positioning models can position absolute
boxes, which can be any type of element. The float positioning model can position float
boxes, which can be any type of element. The relative positioning model can relatively
position any type of box except for absolute boxes. The relative-float positioning model
can relatively position float boxes.
Each positioning model controls positioning using the same basic properties of display,
width, height, and margin. Even though these properties are the same, their values have
different functions in each model. For example, width:auto stretches a static block, whereas
width:auto shrinkwraps an absolute element. You can see this in the example where the
first paragraph is stretched and the absolute span is shrinkwrapped.
Positioning models also use additional properties in ways that are unique to the model.
Absolute and fixed positioning use left, right, top, bottom, and z-index to control the
alignment of the absolute box. Relative positioning uses left, top, and z-index to control
the offset of the box. Float positioning uses float and clear.
Because these models use the same basic properties, different positioning layouts are
triggered using unique combinations of element type, display box, and property values.
Each design pattern exposes the exact combination of rules and elements that triggers each
type of layout. For example, setting width to a value, margin-left to auto, and margin-
right to auto centers a static block, but it doesn’t center a static inline. For example, to
center an absolute element, you must also set left and right to 0.
There are over 50 combinations of design patterns that produce unique layouts. These
patterns are presented in these three chapters on positioning (Chapters 7 through 9). These
patterns are easy to learn because they’re combinations of box models, extents, margins,
and positioning. In other words, the six box models (inline, inline-block, block, table,
absolute, and float) can be combined with the three extents (sized, shrinkwrapped, and
stretched) and the three types of margins (indented, offset, and aligned). In addition, any
type of box except absolute can be relatively positioned.
Box models, extents, and margins are discussed in Chapters 4 through 6. The positioning
models are discussed in this chapter. Indents, offsets, and alignment are discussed in
Chapter 8. Chapter 9 systematically combines the design patterns in these chapters to create
over 50 unique layouts.
Related to Positioned, Static, Absolute, Fixed, Relative, Float and Clear, Relative Float