CSS Positioning Methods
Positioning: Static, Relative, Absolute, Fixed, Sticky
Control element placement with position property.
Position Values
static (default) relative (offset from normal position) absolute (relative to nearest positioned ancestor) fixed (relative to viewport) sticky (scroll-aware positioning)
Positioning Example
.container {
position: relative;
height: 400px;
}
.badge {
position: absolute;
top: 10px;
right: 10px;
background: red;
}
.navbar {
position: sticky;
top: 0;
z-index: 1000;
}Z-Index Control
- z-index: 10 (stacking context)
- Only positioned elements
- Stacking context creation