Static and Relative Positioning
Understand the default static position and how relative moves elements from their normal place.
Static and Relative Positioning is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The position Property
The position property controls how an element is placed in the document flow. The five values are: static, relative, absolute, fixed, and sticky.
position: static (Default)
Every element defaults to position: static. Static elements follow the normal document flow — block elements stack vertically, inline elements flow left to right. The offset properties (top, right, bottom, left) have no effect.
position: relative
position: relative keeps the element in normal flow but lets you offset it relative to its own normal position using top, right, bottom, left.
.shifted {
position: relative;
top: 10px;
left: 20px;
/* Original space is PRESERVED in flow */
}Key Point: Space is Preserved
When you use position: relative with offsets, the element moves visually but its original layout space is still reserved. Other elements do not fill the gap.
Top Right Bottom Left
Offset properties move the element from its reference point:
top: moves down from top edgeleft: moves right from left edge- Negative values reverse the direction
.badge {
position: relative;
top: -2px; /* nudges up */
}z-index Requires position
z-index only works on positioned elements (not static). If you need to control layer order, set at least position: relative.
.tooltip {
position: relative;
z-index: 10;
}Relative as Containing Block
The most important use of position: relative is making an element the containing block for absolutely positioned children — even without any offset values.
.card {
position: relative; /* contains .card__badge */
}
.card__badge {
position: absolute;
top: 8px;
right: 8px;
}Relative + Transform Combo
Combining position: relative with transform creates a new stacking context. The element remains in flow but can be visually transformed.
.hover-lift:hover {
position: relative;
transform: translateY(-4px);
}When NOT to Use relative
Avoid setting position: relative on every element. It creates stacking contexts that can complicate z-index management. Only use it when you need offsets or to anchor absolutely positioned children.
Combining with Transitions
Because relative positioning does not affect layout flow, you can safely animate top/left for visual effects — though animating transform: translate() is more performant.
.shake:hover {
position: relative;
animation: shake 0.3s;
}Debugging Position Issues
In DevTools, look at the Computed panel to see the effective position value. The box model diagram shows the exact offset coordinates applied.
Quick Check
What happens to the layout space of an element when you apply position: relative; top: 20px?
Recap
position: static is the default — no offsets, no stacking. position: relative allows offsets from the element's own position and preserves its layout space. Its most important role is acting as a containing block for absolutely positioned children.
Frequently asked questions
Is the “Static and Relative Positioning” lesson free?
Yes — the full text of “Static and Relative Positioning” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Static and Relative Positioning”?
Understand the default static position and how relative moves elements from their normal place. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Static and Relative Positioning” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Static and Relative Positioning
- Absolute Positioning and Containing Block
- Fixed and Sticky Positioning
- Z-index and Stacking Context