Positioning
CSS positioning includes static, relative, absolute, fixed, and sticky.
relative keeps an element in normal flow while establishing a positioning context for descendants. absolute removes the element from normal flow and positions it relative to a containing block. fixed typically positions an element relative to the viewport, while sticky combines normal flow with scroll-based sticking behavior.
CSS Positioning Schemes
Relative and Absolute Positioning
.card {
position: relative;
}
.card__badge {
position: absolute;
inset-block-start: 1rem;
inset-inline-end: 1rem;
}💡 The card establishes a positioning context and the badge is positioned relative to it.
Key Takeaways
- Use
relativeto establish a positioning context without removing the element from flow. - Absolute positioning should be used for overlays and anchored elements rather than ordinary page layout.
Knowledge Check
Why is `position: relative` commonly applied to a parent of an absolutely positioned child?