Position
The positioning scheme, a named offset scale, and the helper classes built on top of them — including a responsive sticky form that's easy to miss.
Scheme
static and relative stay in normal document flow, so they're safe to compare directly:
absolute/fixed/sticky aren't demoed the same way — not because they're broken
position-absolute or position-fixed live on a box like the one above removes it from flex flow, so it shrinks to fit its content instead of stretching to fill the row (758px → ~104px in testing) — a real, confusing side effect of the isolated demo, not of the class itself. position-fixed additionally detaches the box from this page and pins it to the viewport. Both are demonstrated properly in context instead: position-absolute in Centering below, position-fixed/position-sticky as the named Helpers classes just after this section.position-absoluteposition-fixedposition-stickyEach has a named !important variant (!position-sticky), and position-md-sticky-style responsive forms.
Offsets
top/bottom/start/end, each at 0/50%/100% — start/end map to left/right:
Offsets do nothing without a position other than static
top/bottom/start/end only move an element under position-relative, position-absolute, or position-fixed/position-sticky — on the default position: static, they compile and apply but have zero visible effect, which is why they aren't demoed live on this page.top-0top-50top-100bottom-0start-0end-0Beyond the named scale, arbitrary offsets work on all four sides plus a combined inset shorthand: top-[var(--h)], left-[10px], inset-[0_1rem]. There's also a bare inset-0 named class, separate from the arbitrary form.
Helpers
fixed-top/fixed-bottom/sticky-top/sticky-bottom — reference only below, not a live demo: applying real position: fixed/sticky inside a docs page makes the preview box detach from its container and pin to the actual viewport, which breaks the rest of the page rather than demonstrating anything useful.
fixed-topfixed-bottomsticky-topsticky-bottomsticky-{bp}-top / sticky-{bp}-bottom exist too
sticky-top/sticky-bottom, there's a responsive form most utility references (including this one, until now) leave out: sticky-md-top only becomes sticky from the md breakpoint up — useful for a header that scrolls normally on mobile but sticks on desktop.Centering
Paired with position-absolute + a 50% offset, these correct for the element's own size using a negative transform — the classic centered-badge/dot pattern. Shown here inside a bounded position-relative container, which is the context these classes actually assume; applied to a bare box with nothing around it (as a naive live-toggle demo would), the shift just overlaps whatever is above/left of it:
<div class="position-relative d-inline-block rounded-circle">
<img class="rounded-circle" src="avatar.jpg" alt="" />
<span class="position-absolute top-0 end-0 translate-middle rounded-circle bg-danger">
<!-- unread-count dot, centered exactly on the avatar's corner -->
</span>
</div>