Positioning (relative/absolute)
This course covers the CSS position property and its values. It starts with static, the default where the top, right, bottom and left offsets are ignored. It then explains relative, which nudges an element while its space stays reserved, and absolute, which removes an element from flow and places it against the nearest positioned ancestor. Lessons cover the relative plus absolute pattern for badges, dropdowns and tooltips, fixed elements anchored to the viewport, and z-index for stacking order. A final lesson combines them in one page.
What you'll learn
- ✓How position: static works and why offsets are ignored on it
- ✓Nudging an element with position: relative while its space stays reserved
- ✓Placing elements with position: absolute against the nearest positioned ancestor
- ✓Using a relative container with an absolute child for badges, dropdowns and tooltips
- ✓Anchoring elements to the viewport with position: fixed
- ✓Controlling overlap with source order and z-index
position: static — the default you've always had
Every element in every course so far, under normal flow or flexbox, shared one setting you never wrote: position: static. It's the default value of a property this course finally names.
Read the full lesson free →Curriculum
7 lessonsposition: static — the default you've always had
Introduces position: static, the default value, and shows that offset properties are ignored on static elements.
position: relative — nudging an element from its own spot
Explains how position: relative shifts an element visually while its original space stays reserved in the flow.
position: absolute — removed from flow, positioned against an ancestor
Covers position: absolute, which removes an element from flow and measures offsets from the nearest positioned ancestor.
The positioning context pattern: relative + absolute
Combines relative on a container with an absolute child to build badges, dropdown menus and tooltips.
position: fixed — anchored to the viewport, ignoring scroll
Explains position: fixed, which anchors an element to the viewport so it stays in place during scrolling.
z-index and stacking order
Shows how source order and z-index decide which overlapping element is drawn on top.
Putting it together: a card, a dropdown, and a sticky header
Builds a fixed header, a card with a corner badge and a dropdown menu on one page.