C H A P T E R 7
Positioning Models
This is the first of three chapters on positioning. This chapter presents the CSS positioning models.
Chapter 8 shows how to indent, offset, and align elements. Chapter 9 combines these techniques to
create advanced positioning design patterns.
Chapter Outline
- Positioning Models introduces and demonstrates the six positioning models.
- Positioned explains, demonstrates, and contrasts the four values of the position
property: static, absolute, fixed, and relative. - Closest Positioned Ancestor shows how absolute boxes can be positioned
relative to any ancestor element rather than just the element’s parent. - Stacking Context shows how positioned boxes can be stacked behind or in front
of static elements and each other. - Atomic explains how to render inline content in a block rather than on a block.
- Static explains the basics of normal flow.
- Absolute shows how to remove any element from the normal flow and position it
absolutely with respect to the inside of the border of its closest positioned ancestor. - Fixed shows how to remove any element from the normal flow and position it
absolutely with respect to the viewport. - Relative shows how to use relative positioning to control stacking order, or offset
an element without affecting its shape or the position of other elements. - Float and Clear shows how you can remove an element from the normal flow and
float it to the left or right side of its parent. It also shows how to clear elements so
that they’re positioned below floats on the left, right, or both sides. - Relative Float shows how you can relatively position a float.