Definition
CSS Positioning is the use of the position property to place elements relative to their normal flow, positioned ancestors, the viewport, or scroll boundaries.
Why It Matters
Positioning gives developers exact control over the layout placement of overlays, modals, sticky headers, and floating elements.
Core Concepts
- Normal Flow: Default block (vertical) and inline (horizontal) flow.
- Position Values:
static: Default flow.relative: Offset from normal position; space in flow is preserved.absolute: Removed from flow; positioned relative to nearest positioned ancestor.fixed: Removed from flow; positioned relative to the viewport.sticky: Behaves like relative until a scroll threshold is met, then acts fixed.
z-index: Controls stacking order of overlapping positioned elements.
.parent {
position: relative;
}
.child-absolute {
position: absolute;
top: 10px;
right: 10px; /* Positioned relative to .parent */
}
.sticky-nav {
position: sticky;
top: 0; /* Sticks to top during scroll */
}