What is the difference between position relative, absolute, fixed, and sticky in CSS?
Understand CSS position values — relative, absolute, fixed, and sticky — with clear definitions, examples, and when to use each in real layouts.
Expected Interview Answer
The position property controls how an element is placed: static is the default flow; relative offsets an element from its normal spot; absolute removes it from flow and positions it against its nearest positioned ancestor; fixed pins it to the viewport; and sticky toggles between relative and fixed based on scroll.
A relatively positioned element still occupies its original space but can be nudged with top/left/right/bottom, and it becomes a containing block for absolute children. An absolute element is taken out of normal flow and positioned relative to the closest ancestor with a non-static position (or the initial containing block). Fixed positions relative to the viewport, so it stays put while the page scrolls. Sticky behaves like relative until a scroll threshold defined by top/bottom is crossed, then it sticks like fixed within its scrolling container.
- Relative enables fine offsets and anchors absolute children
- Absolute enables precise overlays and tooltips
- Fixed keeps headers or buttons visible during scroll
- Sticky pins section headers without JavaScript
- Together they cover most overlay and layout needs
AI Mentor Explanation
Relative is a batter shuffling a step outside off from their normal crease mark while the mark stays reserved. Absolute is a fielder repositioned by the captain to an exact spot regardless of the batting order. Fixed is the sightscreen — bolted to the ground, unmoved as play shifts. Sticky is the wicketkeeper who follows the play until the delivery, then holds position behind the stumps.
Step-by-Step Explanation
Step 1
Start from static
Understand the default: elements sit in normal document flow and ignore top/left/right/bottom.
Step 2
Use relative for offsets and anchoring
Nudge an element while it keeps its space, and make it a containing block for absolute children.
Step 3
Use absolute for overlays
Remove the element from flow and position it against the nearest positioned ancestor.
Step 4
Use fixed for viewport pinning
Keep an element in a constant screen position while the page scrolls.
Step 5
Use sticky for scroll-aware pinning
Set a threshold with top or bottom so the element sticks within its scroll container after that point.
What Interviewer Expects
- Correct definition of each value
- Knowing absolute positions against the nearest positioned ancestor
- Understanding fixed uses the viewport
- Explaining sticky as a hybrid needing a threshold
- Awareness of which values remove elements from flow
Common Mistakes
- Thinking absolute positions against the viewport (that is fixed)
- Forgetting sticky needs a top/bottom value to work
- Not setting position: relative on a parent for absolute children
- Assuming relative removes an element from flow
- Ignoring that an overflow ancestor can break sticky
Best Answer (HR Friendly)
“The position property decides how an element is placed. Relative nudges it from its normal spot, absolute places it precisely inside a positioned parent, fixed keeps it stuck to the screen while scrolling, and sticky acts normal until you scroll to a point where it sticks in place.”
Code Example
.card {
position: relative;
}
.badge {
position: absolute;
top: 8px;
right: 8px;
}.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.section-title {
position: sticky;
top: 60px;
}Follow-up Questions
- What does position: absolute position itself against?
- Why might a sticky element fail to stick?
- What is a containing block?
- How does z-index interact with positioned elements?
- What is the difference between fixed and sticky during scroll?
MCQ Practice
1. An absolutely positioned element is placed relative to what?
Absolute positions against the nearest ancestor with a non-static position, or the initial containing block if none exists.
2. Which value keeps an element fixed to the viewport during scroll?
fixed positions relative to the viewport, so the element stays put as the page scrolls.
3. What is required for position: sticky to activate?
Sticky needs a threshold (top/bottom) to know when to stick within its scroll container.
Flash Cards
position: relative — Keeps its space in flow; offsets from its normal spot; anchors absolute children.
position: absolute — Removed from flow; positioned against nearest positioned ancestor.
position: fixed — Pinned to the viewport; stays put while the page scrolls.
position: sticky — Acts relative until a scroll threshold, then sticks like fixed in its container.
Which values leave flow? — absolute and fixed remove the element from normal flow; relative and sticky keep it.
Continue Learning
Related Interview Questions
What is the difference between Flexbox and CSS Grid, and when should you use each?
medium
What is the difference between em, rem, px, and percentage units in CSS?
easy
What is a stacking context and how does z-index actually work?
hard
What are CSS Grid template areas and how do they simplify layout?
medium