Quiz Entry - updated: 2026.07.14
What are the four main CSS positioning/layout techniques?
CSS gives you four ways to place elements: absolute/relative positioning, floats, Flexbox, and Grid — each suited to a different job.
CSS has accumulated several layout systems over the years, and each one was invented to solve a specific problem. Knowing which tool fits which job is half the battle:
| Technique | Best for |
|---|---|
| Absolute/relative positioning | Pinning an element to an exact spot or overlapping it on top of others (badges, tooltips) |
| Float | Letting text wrap around an image or a drop-cap letter |
| Flexbox | One-dimensional layouts — a single row or a single column of items (navbars, button groups) |
| CSS Grid | Two-dimensional layouts — rows and columns at once (whole-page structures) |
The first two (positioning and floats) are the older techniques; Flexbox and Grid are the modern workhorses you reach for most. Real layouts often mix them — for example, a Grid for the overall page skeleton with Flexbox inside individual cells.
Go deeper:
MDN — CSS layout — overview tour through normal flow, positioning, floats, Flexbox, and Grid in one place.