Introduction
The CSS position property determines how an element is placed in the document. By default, every element is static, meaning it follows the normal document flow. Changing position to relative, absolute, fixed, or sticky lets you take an element out of, or offset it within, that flow using the top, right, bottom, and left offset properties.
Cricket analogy: The default 'static' position is like a fielder standing in their assigned spot per the field plan; switching to 'fixed' is like a wicketkeeper who never leaves their crease regardless of where play moves, using top/bottom/left/right offsets to fine-tune exact placement.
Syntax
.box {
position: static | relative | absolute | fixed | sticky;
top: 10px;
right: auto;
bottom: auto;
left: 20px;
z-index: 10;
}Explanation
static ignores offsets entirely. relative positions the element relative to its own normal position, without removing it from the flow — other elements still act as if it were in its original spot. absolute removes the element from the flow and positions it relative to its nearest positioned ancestor (any ancestor with a position other than static); if none exists, it uses the initial containing block (the viewport/html). fixed positions relative to the viewport and stays in place during scrolling. sticky behaves like relative until the element crosses a defined threshold (e.g. top: 0), then it 'sticks' like fixed within its containing block. z-index controls stacking order but only applies to positioned elements (non-static).
Cricket analogy: 'Relative' is a fielder nudged slightly from their marked spot while the field plan still counts them as being there; 'absolute' is a substitute fielder placed relative to the nearest captain's instruction, or the boundary rope if no captain set one; 'fixed' is the sightscreen locked to the bowler's end regardless of overs; 'sticky' is a fielder who stays put until the ball crosses the 30-yard circle, then follows like a fixed marker; and only fielders with an assigned position (not just standing anywhere) can be 'in front' in the stacking sense of z-index.
Example
.card {
position: relative;
}
.badge {
position: absolute;
top: 8px;
right: 8px;
background: red;
color: white;
padding: 2px 6px;
border-radius: 4px;
}
.navbar {
position: sticky;
top: 0;
z-index: 100;
background: white;
}Output
The .badge element is pinned to the top-right corner of .card because .card is the nearest positioned ancestor. The .navbar scrolls normally with the page until it reaches the top of the viewport, then sticks there while the rest of the page continues to scroll beneath it.
Cricket analogy: The '.badge' pinned to the top-right corner of '.card' is like a 'Man of the Match' sticker pinned to the corner of a specific player's profile card, anchored to that card as the nearest positioned reference; the '.navbar' scrolling then sticking at the top mirrors a scoreboard that moves with play until the innings break, then locks at the top of the broadcast.
position: sticky only works if the element has a defined threshold (top, bottom, etc.) and its parent does not have overflow: hidden or a height that clips the sticky element.
Key Takeaways
staticis the default; offsets (top/left/etc.) have no effect on it.relativeoffsets an element from its own original position without removing it from flow.absolutepositions relative to the nearest positioned (non-static) ancestor and removes the element from flow.fixedpositions relative to the viewport and ignores scrolling.stickytoggles between relative and fixed behavior based on scroll position and a defined offset threshold.
Practice what you learned
1. Which position value removes an element from the normal document flow and positions it relative to the viewport?
2. An absolutely positioned element with no positioned ancestor will be positioned relative to what?
3. What is required for position: sticky to work correctly?
4. Which position value does NOT remove the element from the normal document flow?
5. z-index has no visible effect on an element with which position value?
Was this page helpful?
You May Also Like
The CSS Box Model
Understand how content, padding, border, and margin combine to determine the size and spacing of every element.
CSS Specificity and the Cascade
Learn how the browser decides which CSS rule wins when multiple selectors target the same element.
CSS Syntax and Selectors
Learn how CSS rules are structured and how to target HTML elements using the full range of CSS selectors.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics