CSS Position
In this page:
Static and Relative Positioning
Static is the default layout position for all elements. Elements are positioned according to the natural flow of the page. Relative positioning allows you to nudge an element slightly from its normal position using top, right, bottom, or left offsets, without affecting the layout of surrounding elements.
Note: Use relative positioning to create a local coordinate anchor for nested absolute elements.
Warning: Relatively positioned offsets leave behind a blank gap in the element's original space on the page.
Example: Static and Relative Positioning
<style>
.static-box {
position: static;
top: 40px;
left: 40px;
background: lightgray;
padding: 10px;
margin-bottom: 20px;
}
.wrapper {
position: relative;
border: 2px dashed #999;
padding: 20px;
min-height: 100px;
}
.ghost {
position: absolute;
top: 20px;
left: 20px;
width: 240px;
height: 56px;
border: 2px dashed crimson;
background: rgba(220, 20, 60, 0.08);
box-sizing: border-box;
}
.relative-box {
position: relative;
top: 20px;
left: 30px;
width: 240px;
height: 56px;
background: dodgerblue;
color: white;
padding: 10px;
box-sizing: border-box;
}
</style>
<div class="static-box">position: static; top: 40px; left: 40px — ignored, this box hasn't moved</div>
<div class="wrapper">
<div class="ghost"></div>
<div class="relative-box">position: relative; top: 20px; left: 30px — shifted away from the dashed ghost outline (its original spot)</div>
</div>Absolute Positioning
Absolute positioning removes an element from the natural page flow completely. It is positioned relative to its nearest positioned ancestor (an ancestor with a position other than static). If no positioned ancestor exists, it is positioned relative to the initial viewport.
Note: Always set position: relative on your parent container to keep your nested absolute elements from drifting.
Warning: Absolutely positioned elements do not reserve any layout space, causing surrounding elements to move up and fill the gap.
Example: Absolute Positioning
<style>
.parent {
position: relative;
min-height: 150px;
background: #eef;
border: 3px solid #334;
}
.child {
position: absolute;
top: 0;
right: 0;
background: crimson;
color: white;
padding: 8px 12px;
}
</style>
<div class="parent">
Parent: position: relative, with a visible border
<div class="child">Child: position: absolute; top: 0; right: 0</div>
</div>Fixed Positioning
Fixed positioning removes an element from the natural page flow completely and positions it relative to the browser viewport. This means the element stays locked in the same position on the screen even when the user scrolls.
Note: Use fixed positioning to create sticky headers, floating contact buttons, or persistent alert bars.
Warning: Fixed elements can cover up important page content underneath if you do not add matching margins to your body.
Example: Fixed Positioning
<style>
.fixed-badge {
position: fixed;
top: 20px;
right: 20px;
background: darkorange;
color: white;
padding: 12px 16px;
border-radius: 6px;
font-weight: bold;
}
.content p {
background: #f0f0f0;
padding: 12px;
margin-bottom: 10px;
}
</style>
<div class="fixed-badge">Fixed to the top-right corner</div>
<div class="content">
<p>Scroll down to see the fixed element stay in its corner.</p>
<p>Line 1 — keep scrolling, the badge stays put.</p>
<p>Line 2 — keep scrolling, the badge stays put.</p>
<p>Line 3 — keep scrolling, the badge stays put.</p>
<p>Line 4 — keep scrolling, the badge stays put.</p>
<p>Line 5 — keep scrolling, the badge stays put.</p>
<p>Line 6 — keep scrolling, the badge stays put.</p>
<p>Line 7 — keep scrolling, the badge stays put.</p>
<p>Line 8 — keep scrolling, the badge stays put.</p>
<p>Line 9 — keep scrolling, the badge stays put.</p>
<p>Line 10 — keep scrolling, the badge stays put.</p>
<p>Line 11 — keep scrolling, the badge stays put.</p>
<p>Line 12 — keep scrolling, the badge stays put.</p>
<p>Line 13 — keep scrolling, the badge stays put.</p>
<p>Line 14 — keep scrolling, the badge stays put.</p>
<p>Line 15 — keep scrolling, the badge stays put.</p>
<p>Line 16 — keep scrolling, the badge stays put.</p>
<p>Line 17 — keep scrolling, the badge stays put.</p>
<p>Line 18 — keep scrolling, the badge stays put.</p>
<p>Line 19 — keep scrolling, the badge stays put.</p>
<p>Line 20 — keep scrolling, the badge stays put.</p>
<p>Line 21 — keep scrolling, the badge stays put.</p>
<p>Line 22 — keep scrolling, the badge stays put.</p>
<p>Line 23 — keep scrolling, the badge stays put.</p>
<p>Line 24 — keep scrolling, the badge stays put.</p>
<p>Line 25 — keep scrolling, the badge stays put.</p>
<p>Line 26 — keep scrolling, the badge stays put.</p>
<p>Line 27 — keep scrolling, the badge stays put.</p>
<p>Line 28 — keep scrolling, the badge stays put.</p>
<p>Line 29 — keep scrolling, the badge stays put.</p>
<p>Line 30 — keep scrolling, the badge stays put.</p>
<p>Line 31 — keep scrolling, the badge stays put.</p>
<p>Line 32 — keep scrolling, the badge stays put.</p>
<p>Line 33 — keep scrolling, the badge stays put.</p>
<p>Line 34 — keep scrolling, the badge stays put.</p>
<p>Line 35 — keep scrolling, the badge stays put.</p>
<p>Line 36 — keep scrolling, the badge stays put.</p>
<p>Line 37 — keep scrolling, the badge stays put.</p>
<p>Line 38 — keep scrolling, the badge stays put.</p>
<p>Line 39 — keep scrolling, the badge stays put.</p>
<p>Line 40 — keep scrolling, the badge stays put.</p>
<p>Line 41 — keep scrolling, the badge stays put.</p>
<p>Line 42 — keep scrolling, the badge stays put.</p>
<p>Line 43 — keep scrolling, the badge stays put.</p>
<p>Line 44 — keep scrolling, the badge stays put.</p>
<p>Line 45 — keep scrolling, the badge stays put.</p>
<p>Line 46 — keep scrolling, the badge stays put.</p>
<p>Line 47 — keep scrolling, the badge stays put.</p>
<p>Line 48 — keep scrolling, the badge stays put.</p>
<p>Line 49 — keep scrolling, the badge stays put.</p>
<p>Line 50 — keep scrolling, the badge stays put.</p>
</div>Sticky Positioning
Sticky positioning behaves like a hybrid of relative and fixed positioning. The element acts like a relatively positioned element within the page flow until it reaches a specified scroll threshold, where it sticks to the screen like a fixed element.
Note: Use sticky positioning to create readable table headers or sticky sidebars that stay in view as users scroll.
Warning: Sticky elements must have at least one offset property (like top: 0) defined, or they will behave like static elements.
Example: Sticky Positioning
<style>
.content p {
background: #f0f0f0;
padding: 12px;
margin-bottom: 10px;
}
.sticky-header {
position: sticky;
top: 0;
background: seagreen;
color: white;
padding: 10px;
font-weight: bold;
}
</style>
<div class="content">
<p>Above the sticky header — line 1.</p>
<p>Above the sticky header — line 2.</p>
<p>Above the sticky header — line 3.</p>
<p>Above the sticky header — line 4.</p>
<p>Above the sticky header — line 5.</p>
</div>
<div class="sticky-header">Sticky: acts normal here, then sticks to the top once you scroll past it</div>
<div class="content">
<p>Below the sticky header — line 1. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 2. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 3. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 4. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 5. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 6. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 7. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 8. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 9. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 10. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 11. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 12. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 13. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 14. It stays stuck at the top while you scroll through this.</p>
<p>Below the sticky header — line 15. It stays stuck at the top while you scroll through this.</p>
</div>Z-index Interaction
When you position elements, they can overlap. The z-index property determines the stacking order of these overlapping elements, bringing them forward or pushing them back.
Note: Z-index only works on positioned elements (elements with a position of relative, absolute, fixed, or sticky).
Warning: Applying very high, random z-index values (like 9999) can make managing overlapping elements in larger projects difficult.
Example: Z-index Interaction
<style>
.wrapper {
position: relative;
min-height: 120px;
}
.back {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 100px;
background: gray;
color: white;
z-index: 1;
}
.front {
position: absolute;
top: 50px;
left: 60px;
width: 150px;
height: 100px;
background: tomato;
color: white;
z-index: 2;
}
</style>
<div class="wrapper">
<div class="back">Behind</div>
<div class="front">In front</div>
</div>- Using absolute positioning on elements without setting relative positioning on their parent container, causing them to drift.
- Omitting required offsets (like top or left) on sticky elements, which prevents them from sticking.
- Applying z-index values to statically positioned elements, which browsers ignore.
- The position property controls how elements are placed on the page.
- Relative positioning offset values leave behind blank space, while absolute and fixed elements are removed from the page flow completely.
- Manage overlapping elements cleanly using z-index on your positioned elements.
Standard positioning properties and basic sticky rules are supported natively by all modern web browsers.
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: