Positioning is powerful and easy to misuse.
Direct answer
CSS position has five values: static (default), relative, absolute, fixed and sticky. Use relative on a parent, absolute on a child you want to place inside it, fixed for items pinned to the screen and sticky for headers that stick when scrolling.
Examples
.parent { position: relative; }
.badge { position: absolute; top: 8px; right: 8px; }
.topbar { position: fixed; top: 0; left: 0; right: 0; }
.section-title { position: sticky; top: 0; }
Summary
| Value | Behaviour |
|---|---|
static | normal flow |
relative | normal flow, can be nudged |
absolute | out of flow, relative to positioned parent |
fixed | out of flow, relative to the viewport |
sticky | normal until a scroll threshold, then sticks |
Tips
- Do not use absolute for page layout. Use Flexbox or Grid.
- If an absolute child is in the wrong place, check the parent has
position: relative.
Where Teyro fits
Teyro's HTML & CSS for Beginners course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Use positioning for overlays and details, not whole layouts.
