Positioning and stacking

Normal flow first

By default every element is position: static. It sits in the normal flow: blocks stack from top to bottom and inline content flows like text. Use flexbox and grid for layout; use positioning only for special cases like badges, overlays and sticky headers.

The badge pattern

.card {
  position: relative;   /* becomes the reference for children */
}
.card .badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

An absolute element looks up the tree for the nearest ancestor whose position is not static. Giving the card position: relative (without moving it) makes the card that reference. Without it, the badge would jump to the corner of the whole page.

Sticky and fixed

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
}
.pay-bar {
  position: fixed;
  inset: auto 0 0 0;   /* top right bottom left: stuck to the bottom */
}

inset is a shorthand for top, right, bottom and left. inset: 0 stretches an absolute or fixed element over its whole reference box, which is useful for overlays.

z-index and stacking

When positioned elements overlap, z-index decides who is on top: higher numbers come forward. z-index only works on positioned elements (and on flex or grid items). Elements are grouped into stacking contexts, so a child can never rise above its parent's group, however big its number.