Layout

Position

The position property moves elements out of the normal flow of the page.

Value	Behaviour
`static`	Default. Normal flow.
`relative`	Normal flow, but can be nudged with `top`/`left`. Also becomes the anchor for absolute children.
`absolute`	Removed from flow. Placed relative to the nearest positioned ancestor.
`fixed`	Removed from flow. Stays in the same spot on screen while scrolling.
`sticky`	Normal until you scroll past it, then sticks.

A badge in the corner of a card

.card { position: relative; }

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
}