1. Relative Container + Absolute Children
An element with position: absolute; positions itself relative to its nearest ancestor with a position other than static (commonly position: relative;).
Position | Absolute
Corner badges positioned with negative offsets.
Floating Header Badge
Floating button anchored to the card header.
.card { position: relative; }
.badge-corner { position: absolute; top: -15px; right: -15px; }
.badge-centered { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); }2. Visual Overlap & OpenMoji Composition
Using absolute positioning to create layered graphic compositions and decorative offsets.
3. Flow Comparison: Static vs. Relative vs. Absolute
Static: Normal flow, does not accept top/left. Relative: Moved visually, but retains original space in flow. Absolute: Completely removed from normal flow.
Position | static
Width decider in normal flow 🙄
Position | Relative (top: 15px; left: -25px)
Shifted visually, flow space preserved.
Position | Absolute (bottom: -20px; right: 20px)
Removed from flow, anchored to nearest positioned parent.
4. The Classic Absolute Centering Trick
How to center any element inside a container with absolute positioning using transform: translate(-50%, -50%).
.center-item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}5. Position: Sticky (Scrollable Demo)
Toggles between relative and fixed depending on user scroll position. Scroll the container below to see sticky headers snap to the top!
Scroll down to see the next section header take over!
CSS position: sticky; is perfect for table headers, index alphabets, and sidebars.
Item A-1: Pure CSS without JavaScript
Item A-2: Requires an offset like top: 0; to activate.
Notice how Section B pushes Section A away as you scroll!
Item B-1: OpenMoji character library integration
Item B-2: Cascadia Code font styling
Item B-3: Fully responsive on mobile screens
Section C takes over when reaching the top!
End of sticky scroll demo.
.sticky-header {
position: sticky;
top: 0;
z-index: 10;
}6. Z-Index & Stacking Context
z-index controls the third dimension (depth). It only works on elements with a specified position (relative, absolute, fixed, or sticky) or flex/grid items.
Red (Bottom)
Green (Middle)
Blue (Top)
.red { position: absolute; z-index: 1; }
.green { position: absolute; z-index: 2; }
.blue { position: absolute; z-index: 3; } /* On top of red & green */7. Modern Anchor Positioning & Inset (#4, #7)
CSS Anchor Positioning: Anchor a floating element to any reference element without JavaScript!
Logical Inset: inset: 0 cleanly replaces setting top: 0; right: 0; bottom: 0; left: 0;.
/* Anchor Positioning API (Zero JS Popper!) */
.button { anchor-name: --my-button; }
.tooltip {
position: absolute;
position-anchor: --my-button;
bottom: anchor(top);
left: anchor(center);
transform: translateX(-50%);
}
/* Logical Inset Shorthand */
.modal-overlay { position: fixed; inset: 0; }8. Multi-Column Layout & Scroll Behavior (#5, #39, #40)
Magazine style multi-column text distribution (column-count: 3), paired with scroll-margin-top to prevent sticky headers from covering anchor targets, and overscroll-behavior: contain to stop scroll chaining.
scroll-margin-top: 80px prevents sticky navigation bars from hiding headings.
Furthermore, setting overscroll-behavior: contain on modal dialogs stops the background page from scrolling once the modal reaches its end!
/* Newspaper Multi-column */
.article {
column-count: 3;
column-gap: 2rem;
column-rule: 1px solid #cbd5e1;
}
/* Sticky Header Offset & Scroll Containment */
section[id] { scroll-margin-top: 80px; }
.modal-body { overscroll-behavior: contain; }