Positioning and Layout Basics
How boxes lay out by default, writing modes, the five position values, z-index and stacking contexts, floats, and every way to center something.
In Phase 5 you learned that every element is a box. This phase is about where those boxes go. First you'll see what the browser does when you write no layout CSS at all: normal flow, where blocks stack from top to bottom and inline content runs along lines. You'll also meet writing modes and logical properties, which let one stylesheet work for English, Arabic and vertical Japanese text.
Then you'll take boxes out of that flow on purpose. The position property moves boxes with relative, pins them with absolute and fixed, and makes them stick while scrolling with sticky. Once boxes can overlap, you need to control which one is on top, so you'll learn z-index and the idea behind every "z-index doesn't work" bug: the stacking context. You'll also learn floats, the oldest layout tool, which is still the right one for wrapping text around an image, and how to stop floats escaping their parent.
The phase ends with centering, the most searched CSS question there is, solved every way that matters and with a clear rule for which one to pick. Every example is live and most print real measured positions, so you can change a value and check the browser's maths. Flexbox (Phase 7) and Grid (Phase 8) build directly on this phase.
Practise this phase
Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.