CSS Positioning Guide
Complete CSS positioning reference with interactive examples.
Master static, relative, absolute, fixed, sticky, and z-index.
Position Values
| Property | Description | |
|---|---|---|
position: static; | Normal document flow, ignores top/right/bottom/left | |
position: relative; | Positioned relative to its normal position | |
position: absolute; | Positioned relative to nearest positioned ancestor | |
position: fixed; | Positioned relative to the viewport | |
position: sticky; | Hybrid of relative and fixed based on scroll |
position: static
Default positioning. Elements flow normally in the document. Top, right, bottom, left have no effect.
position: static; /* default - ignores offsets */position: relative
Positioned relative to its normal position. Original space is preserved.
position: relative; top: 20px; left: 20px;position: absolute
Positioned relative to the nearest positioned ancestor (not static). Removed from normal flow.
position: absolute; top: 10px; right: 10px;position: fixed
Positioned relative to the viewport. Stays in place when scrolling.
position: fixed; top: 0; right: 0;position: sticky
Behaves like relative until it reaches a threshold, then becomes fixed. Scroll the container below.
position: sticky; top: 0;Offset Properties (top, right, bottom, left)
| Property | Description | |
|---|---|---|
top: 0; | Distance from the top edge | |
right: 0; | Distance from the right edge | |
bottom: 0; | Distance from the bottom edge | |
left: 0; | Distance from the left edge | |
inset: 0; | Shorthand for top, right, bottom, left |
z-index Stacking
Controls stacking order of positioned elements. Higher values appear on top.
Common z-index Scale
| CSS | Value | Typical Usage | |
|---|---|---|---|
z-index: -1; | -1 | Behind content | |
z-index: 0; | 0 | Base level | |
z-index: 10; | 10 | Dropdowns | |
z-index: 20; | 20 | Sticky headers | |
z-index: 30; | 30 | Fixed elements | |
z-index: 40; | 40 | Modals | |
z-index: 50; | 50 | Tooltips | |
z-index: 9999; | 9999 | Top priority overlays |
Understanding Stacking Contexts
A new stacking context is created when an element has:
position: absolute/relativewithz-indexother than autoposition: fixedorposition: stickyopacityless than 1transform,filter, orbackdrop-filterisolation: isolate
Key insight: z-index only works within the same stacking context. A child with z-index: 9999 cannot appear above a sibling of its parent with z-index: 1.
Common Positioning Patterns
Centering with Absolute
.container {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Sticky Header
header {
position: sticky;
top: 0;
z-index: 20;
background: white;
}Fixed Sidebar
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 250px;
}
.main-content {
margin-left: 250px;
}Modal Overlay
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 40;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 50;
}Tooltip Positioning
.tooltip-container {
position: relative;
}
.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
}Corner Badge
.card {
position: relative;
}
.badge {
position: absolute;
top: -8px;
right: -8px;
}Quick Reference
When to use each position:
static- Default flow, most elementsrelative- Minor offsets, absolute parentabsolute- Overlays, tooltips, badgesfixed- Headers, sidebars, modalssticky- Scrolling headers, sidebars
Key principles:
- Absolute needs a positioned parent
- Fixed ignores all ancestors
- Sticky needs a scroll container
- z-index only works on positioned elements
- Use
inset: 0;for full coverage
More CSS Guides & References
CSS Display Guide
block, inline, flex, grid explained
CSS Box Model Guide
Margin, border, padding, content
CSS Inheritance Guide
How properties cascade and inherit
CSS Cascade Layers
@layer for managing specificity
Container Queries Guide
Responsive components with @container
CSS Custom Properties
CSS variables and theming
View Transitions Guide
Smooth page transition animations
Anchor Positioning
Position elements relative to anchors
Parallax Scrolling
CSS-only parallax effects
CSS Performance Audit
Optimize CSS for speed
CSS Selectors Cheatsheet
All selectors with examples
CSS Units Cheatsheet
rem, em, vw, vh and more
CSS Functions Reference
calc(), clamp(), min(), max()
Media Queries Cheatsheet
Responsive breakpoints guide
Pseudo-Classes Cheatsheet
:hover, :focus, :nth-child, etc.
Pseudo-Elements Cheatsheet
::before, ::after, ::placeholder
Modern CSS Features
New CSS features for 2026
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes