position: pinning and layering

Leaving the flow

So far every box sits in normal flow: blocks stack, inlines line up, and each element's place depends on the ones before it. But real interfaces are full of elements that must not flow — a header that stays put while the page scrolls, a notification badge sitting on a corner of an icon, a dropdown floating over the content below it. The position property exists for exactly these cases.

.badge { position: absolute; top: -8px; right: -8px; }

• static — the default: normal flow, and the offset properties (top, right, bottom, left) are ignored.
• relative — the element stays in flow, but you can nudge it from its normal spot, and (the important part) it becomes an anchor for absolute children.
• absolute — the element leaves the flow entirely and is placed against its nearest positioned ancestor (the closest ancestor whose position is anything but static). No positioned ancestor? It anchors to the page.
• fixed — leaves the flow and pins to the viewport: it does not move when the page scrolls.
• sticky — a hybrid: flows normally until the page scrolls it to the offset you set, then it pins there.

The absolute-anchoring rule is the one that bites: forget to position the parent and your "corner badge" flies to the corner of the whole page.

The two recipes you will actually ship

Badge on a corner — the pattern behind every cart count and unread dot. Position the parent relative (changing nothing visually), then place the child absolutely against it:

.cart { position: relative; }
.cart .badge {
  position: absolute;
  top: -8px;
  right: -8px;
}

Header that stays while you scroll:

.site-header {
  position: sticky;
  top: 0;
}

When positioned elements overlap, z-index decides who paints on top: higher numbers win, and it only works on positioned elements. Keep the values few and small (1, 10, 100 for content, raised, overlay) — z-index arms races of 99999 are a real codebase smell.