position changes how an element is placed, combined with
top/right/bottom/left to offset it.
| Value | Behavior |
|---|---|
static |
Default — normal document flow, offsets ignored |
relative |
Normal flow, but offsets shift it from where it would have been, without affecting other elements |
absolute |
Removed from flow, positioned relative to its nearest positioned ancestor (or the page, if none) |
fixed |
Removed from flow, positioned relative to the viewport — stays put while scrolling |
sticky |
Normal flow until a scroll threshold, then behaves like fixed within its parent |
CSS
.container {
position: relative; /* makes this the "anchor" for absolute children */
}
.badge {
position: absolute;
top: 8px;
right: 8px;
}
.navbar {
position: sticky;
top: 0;
}The .badge is positioned relative to .card because .card has
position: relative — remove that line and the badge would jump to be
positioned relative to the whole page instead.