C H A P T E R 9
Positioning: Advanced
This is the third of three chapters on positioning. It combines the positioning techniques of the previous
2 chapters into 12 design patterns that align and offset static and positioned elements to the left, center,
right, top, middle, or bottom of their container while stretching, sizing, or shrinkwrapping them. This
chapter focuses on static and absolute positioned elements.
This chapter combines design patterns from Chapter 8 to align and offset elements from their
containers. It also introduces new patterns to align and offset elements from the top, middle, and
bottom of their containers. If you aren’t already familiar with the design patterns in Chapters 5–8, you
may want to review them. Because aligning and offsetting from the left and right sides are similar, you
may want to skim over Right Aligned and Right Offset.
Chapter Outline
- Left Aligned shows how to align an element to the left side of its container.
- Left Offset shows how to offset a left-aligned element.
- Right Aligned shows how to align an element to the right side of its container.
- Right Offset shows how to offset a right-aligned element.
- Center Aligned shows how to align an element to the center of its container.
- Center Offset shows how to offset a center-aligned element.
- Top Aligned shows how to align an element to the top of its container.
- Top Offset shows how to offset a top-aligned element.
- Bottom Aligned shows how to align an element to the bottom of its container.
- Bottom Offset shows how to offset a bottom-aligned element.
- Middle Aligned shows how to align an element to the middle of its container.
- Middle Offset shows how to offset a middle-aligned element.