CSS Intermediate
Explain the CSS position property and its values
The Five Values of CSS position
static (Default)
.box { position: static; } /* default */
- Follows the normal document flow
top,right,bottom,left, andz-indexhave no effect
relative
.box {
position: relative;
top: 10px;
left: 20px;
}
- Offsets relative to its own original position
- Retains its original space in the document flow (doesn't affect other elements)
- Commonly used as a containing block for absolutely positioned children
absolute
.parent { position: relative; }
.child {
position: absolute;
top: 0;
right: 0;
}
- Positioned relative to the nearest positioned ancestor (any value other than
static) - Removed from normal flow — takes up no space
- Falls back to
<html>if no positioned ancestor is found
fixed
.navbar {
position: fixed;
top: 0;
width: 100%;
}
- Positioned relative to the browser viewport
- Stays in place when the page is scrolled
- Removed from normal flow
sticky
.header {
position: sticky;
top: 0;
}
- Combines
relativeandfixed: scrolls normally until it hits a threshold, then sticks in place - Not fully removed from the document flow
Comparison
| Value | Reference | Occupies Space | Out of Flow |
|---|---|---|---|
static |
Document flow | ✅ | ❌ |
relative |
Own original position | ✅ | ❌ |
absolute |
Nearest positioned ancestor | ❌ | ✅ |
fixed |
Viewport | ❌ | ✅ |
sticky |
Scroll container | ✅ | Partial |
✦ AI Mock Interview
Type your answer and get instant AI feedback
Sign in to use AI scoring