In this lesson, you’ll master CSS positioning and z-index. Positioning controls where elements live on the page, how they move, and how they stack on top of each other.
Most advanced layouts, dropdowns, modals, tooltips, sticky headers, and floating buttons rely on position + z-index.
Info!
If you understand positioning properly, layout problems become much easier to fix.
1. CSS position Property
The position property defines how an element is placed in the document
and how it reacts to top, right, bottom, and left.
Main position values:
- static (default)
- relative
- absolute
- fixed
- sticky
2. position: static (Default)
This is the default behavior of every HTML element. Static elements follow the normal document flow.
- top / left / right / bottom do not work
- Element cannot be layered using z-index
Tip!
Most elements remain static unless you change their position explicitly.
3. position: relative
Relative positioning moves an element relative to its original position. The space it originally occupied is still preserved.
- Supports top / left / right / bottom
- Creates a reference point for absolute children
Info!
Relative positioning does not remove the element from the document flow.
4. position: absolute
Absolute elements are removed from the normal document flow. They position themselves relative to the nearest positioned ancestor.
If no positioned ancestor exists, they position relative to the viewport.
Warning!
Absolute elements can overlap content if not managed carefully.
5. position: fixed
Fixed elements are positioned relative to the browser viewport. They stay in the same place even when the page scrolls.
Common uses:
- Sticky headers
- Floating action buttons
- Chat widgets
6. position: sticky
Sticky positioning is a mix of relative and fixed. The element scrolls normally until it reaches a threshold, then it sticks in place.
Tip!
Sticky works only when the parent container allows scrolling.
7. z-index (Stacking Order)
The z-index property controls which element appears on top.
It works only on positioned elements (not static).
8. Stacking Context (Advanced)
A stacking context is a self-contained z-index environment. Child elements cannot escape their parent stacking context.
Created by:
- position + z-index
- opacity less than 1
- transform
Warning!
Many z-index bugs come from unexpected stacking contexts.
What You Learned
- How each position type behaves
- When to use relative vs absolute
- How fixed and sticky work
- How z-index controls stacking
- Why stacking context matters
Next lesson: Backgrounds, Borders & Visual Effects
