What is the Position Property in CSS?
Learn how the CSS position property works: static, relative, absolute, fixed, and sticky, with examples of how each affects document flow and layout.
Expected Interview Answer
The CSS position property controls how an element is placed in the document, choosing between static (normal flow), relative (offset from its own position), absolute (positioned relative to a positioned ancestor), fixed (relative to the viewport), and sticky (a hybrid that toggles between relative and fixed based on scroll).
By default every element is position: static and simply follows normal document flow, ignoring top/left/right/bottom offsets. Setting position: relative keeps the element in flow but lets top/left/right/bottom nudge it visually from where it would otherwise sit, and it also becomes a positioning context for any absolutely positioned children. position: absolute removes the element from normal flow entirely and positions it relative to the nearest ancestor that isn't static (falling back to the initial containing block if none exists), so surrounding content collapses into the space it left. position: fixed behaves like absolute but anchors to the viewport, staying in place during scroll, while position: sticky toggles between relative and fixed as the user scrolls past a defined threshold, commonly used for sticky headers or table columns.
- Enables overlays, tooltips, and modals positioned precisely
- Powers sticky headers and navigation without JavaScript
- Lets relative parents act as containment for absolute children
- Explains why some elements stay fixed during scroll and others don't
- Foundational for z-index stacking and layered UI
AI Mentor Explanation
Static is a fielder standing wherever the standard field placement puts them. Relative nudges that fielder a few steps from their spot while still counting in the field setup, absolute pulls them off the formation to guard one exact zone from the boundary rope, and fixed plants them at a fixed spot in the stands regardless of play.
Step-by-Step Explanation
Step 1
Start from static
Every element defaults to position: static — it follows normal flow and ignores top/left/right/bottom.
Step 2
Nudge in place with relative
position: relative keeps the element in flow but offsets it visually using top/left/right/bottom, and becomes an anchor for absolute children.
Step 3
Pull out of flow with absolute
position: absolute removes the element from flow and positions it relative to the nearest non-static ancestor (or the viewport if none exists).
Step 4
Anchor to the viewport with fixed
position: fixed positions relative to the browser viewport and stays put during scrolling, useful for fixed headers or floating buttons.
Step 5
Combine both with sticky
position: sticky acts relative until a scroll threshold (e.g. top: 0) is crossed, then behaves fixed within its containing block.
What Interviewer Expects
- Names all five position values and describes each briefly
- Explains that relative keeps space in flow, absolute removes it
- Knows absolute positions relative to the nearest positioned ancestor
- Understands fixed anchors to the viewport, sticky toggles with scroll
- Can connect position: relative to enabling absolute children
Common Mistakes
- Forgetting an ancestor needs position other than static for absolute children to anchor to it
- Confusing fixed (viewport-anchored) with sticky (scroll-threshold-anchored)
- Assuming position: relative removes the element from document flow
- Not setting a positioning context and being surprised absolute positions relative to the whole page
- Forgetting sticky requires a defined threshold (e.g. top: 0) to activate
Best Answer (HR Friendly)
“The position property tells the browser how to place an element on the page: leave it in the normal flow, nudge it slightly, pull it out entirely to place it exactly, lock it to the screen, or make it stick in place while scrolling. It's what makes things like sticky headers and pop-up tooltips possible.”
Code Example
.card {
position: relative; /* becomes the positioning context */
}
.card .badge {
position: absolute;
top: 8px;
right: 8px; /* positioned relative to .card, not the page */
}.floating-btn {
position: fixed;
bottom: 24px;
right: 24px; /* stays put during scroll */
}
.table-header {
position: sticky;
top: 0; /* sticks once it hits the top of its scroll container */
}Follow-up Questions
- What determines the containing block for an absolutely positioned element?
- How does position: sticky differ from position: fixed?
- Does position: relative remove an element from normal document flow?
- How does z-index interact with positioned elements?
- Why might position: sticky fail to work inside a parent with overflow: hidden?
MCQ Practice
1. Which position value removes an element from normal document flow?
position: absolute takes the element out of normal flow entirely, positioning it relative to its nearest positioned ancestor.
2. What does an absolutely positioned element position itself relative to if no ancestor is positioned?
Without a positioned ancestor, an absolute element falls back to the initial containing block, roughly the viewport.
3. Which position value toggles between relative and fixed based on scroll position?
position: sticky behaves like relative until a defined scroll threshold, then switches to fixed-like behavior within its container.
Flash Cards
What is the default value of position? — static — the element follows normal document flow and ignores offsets.
Does position: relative remove an element from flow? — No — it stays in flow but can be offset visually with top/left/right/bottom.
What does an absolute element position relative to? — The nearest ancestor with a position other than static, or the viewport if none exists.
How is sticky different from fixed? — Sticky toggles between relative and fixed based on scroll position; fixed is always anchored to the viewport.