Positioning

The position property decides whether a box stays in normal flow and what its offsets top, right, bottom and left are measured from. The inset shorthand sets all four (inset: 0 fills the containing block); inset-inline-start and similar are the writing-mode-aware forms.

The five position values
Value	Keeps its space?	Offsets measured from	Stacking context
static	Yes	Offsets ignored	No
relative	Yes	Its normal position	With z-index
absolute	No	Nearest non-static ancestor	With z-index
fixed	No	Viewport	Always
sticky	Yes	Nearest scroll container	Always

A relative parent with an absolute child places badges. A sticky element scrolls until it reaches its offset, then sticks until its parent's end pushes it away (Baseline widely available since 2022). Below, the header needs z-index: 1, or the later positioned cards paint over it.

A sticky letter header over scrolled cards with absolute badgesHTMLLive

<style>
  body { font: 15px system-ui; margin: 8px; }
  .list { height: 130px; width: 300px; overflow: auto; border: 1px solid #90a4ae; }
  h4 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 4px 8px; color: #fff;
    background: #1565c0; }
  p { position: relative; margin: 10px; padding: 8px; background: #e3f2fd; }
  b { position: absolute; top: -6px; right: -6px; padding: 0 6px; border-radius: 9px;
    background: #ef6c00; color: #fff; }
</style>
<div class="list"><h4>A</h4><p>Alice</p><p>Anna</p><h4>B</h4><p>Bob <b>3</b></p>
  <p>Bella <b>new</b></p><p>Brian</p></div>
<script>document.querySelector('.list').scrollTop = 150;</script>

Browser output of 51

z-index and stacking contexts

z-index orders positioned boxes and flex or grid items, but only against siblings in the same stacking context, a group the browser paints as one unit. Besides the root, a context is created by a positioned box with a z-index, fixed and sticky boxes, opacity below 1, transform, filter, clip-path, mask, contain: paint, container-type: inline-size and isolation: isolate. A child's z-index: 9999 never escapes its parent's context.

The menu's z-index 9999 only competes inside its header's context, so main (z-index 2) covers it

isolation: isolate creates a context with no side effect, fencing in a component's z-index values. Modal dialogs and popovers enter the top layer, above every z-index (<dialog> and popover).

MENU

z-index and stacking contexts