Positioning: relative absolute fixed sticky
Pull elements out of normal flow with position values to overlay content, fix headers, and create sticky sidebars.
Positioning: relative absolute fixed sticky is a free Frontend Academy lesson on CoddyKit — lesson 4 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 Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Normal Document Flow
By default, elements follow normal document flow: block elements stack vertically, inline elements flow horizontally within text. The position property lets you step outside this flow for overlays, fixed headers, and tooltips.
position: static (Default)
Every element starts with position: static. This means it's positioned by normal document flow. The top, right, bottom, and left properties have no effect on static elements.
position: relative
position: relative keeps the element in normal flow but lets you offset it from its original position using top, right, bottom, left. Crucially, it creates a positioning context for absolutely positioned descendants.
.card {
position: relative;
top: 10px; /* shift 10px down from original position */
left: -5px; /* shift 5px left */
}position: absolute
position: absolute removes the element from normal flow. It's positioned relative to its nearest positioned ancestor (any position other than static). If no positioned ancestor exists, it's relative to the viewport.
.card {
position: relative; /* creates context */
}
.card .badge {
position: absolute;
top: 12px;
right: 12px; /* top-right corner of .card */
}The z-index Property
Positioned elements can overlap. Use z-index to control stacking order. Higher z-index = on top. Only works on positioned elements (not static). Creates a new stacking context.
.tooltip {
position: absolute;
z-index: 100; /* above other content */
}
.modal {
position: fixed;
z-index: 1000; /* above tooltip */
}position: fixed
position: fixed removes the element from normal flow and pins it to the viewport. It doesn't scroll with the page. Perfect for sticky headers, floating action buttons, and cookie banners.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: white;
z-index: 50;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}position: sticky
position: sticky is a hybrid: the element scrolls with the page until it hits a threshold (set with top/bottom), then it sticks. Useful for section headers in long tables or sidebars that stick after the header.
.sidebar {
position: sticky;
top: 80px; /* sticks 80px from top after scroll */
align-self: flex-start;
}Centering with position: absolute
A classic technique: combine position: absolute; top: 50%; left: 50% with transform: translate(-50%, -50%) to perfectly center an element in its positioned parent.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 480px;
background: white;
border-radius: 12px;
}Overflow Hidden Clips Absolute Children
An absolutely positioned child can overflow its parent's bounds by default. Adding overflow: hidden to the parent clips anything outside its box — useful for card image effects and badge clipping.
Pitfall: Unwanted Stacking Contexts
Some properties create stacking contexts unintentionally: transform, filter, isolation: isolate. This can cause z-index battles where a z-index: 9999 element is still behind another because it's inside a lower stacking context.
When to Use Each Positioning
relative: offsets and positioning context. absolute: badges, tooltips, overlays relative to a parent. fixed: persistent headers, modals, toasts. sticky: section headers, sidebar navigation that follows scroll. Avoid position for layouts — use Flex or Grid.
Quick Check
An element has position: absolute; top: 0; right: 0;. Where will it appear if its parent has position: relative?
Recap: CSS Positioning
static is default. relative offsets without leaving flow and creates a positioning context. absolute leaves flow and positions to nearest positioned ancestor. fixed sticks to the viewport. sticky scrolls then sticks. Use z-index to control overlap order.
Frequently asked questions
Is the “Positioning: relative absolute fixed sticky” lesson free?
Yes — the full text of “Positioning: relative absolute fixed sticky” is free to read here on the web, and the Frontend 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 Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Positioning: relative absolute fixed sticky”?
Pull elements out of normal flow with position values to overlay content, fix headers, and create sticky sidebars. You practise Frontend 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 Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Positioning: relative absolute fixed sticky” 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 Frontend Academy lesson?
Yes. Every Frontend 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
- Selectors and the Cascade
- Colors Typography and the Box Model
- Display: block inline flex grid basics
- Positioning: relative absolute fixed sticky