Positioning and Layers

Relative and Absolute Badge

A card becomes the containing block for a notification badge, which is placed in the top-right corner with normal CSS positioning.

Program

Relative positioning on a parent creates a local reference for absolutely positioned children. That lets small badges stay attached to a component.

The badge lesson uses a relative card and an absolute child.Position Schemesnormal flow plus offset referencesEach scheme chooses a different reference for offsets.staticflowrelativeown spotabsolutecardfixedviewportstickyscrollNormal flow stays in the page; absolute/fixed/sticky use anchors.The badge lesson uses a relative card and an absolute child.
Figure: Position schemes choose different offset references. Model source: books/css/06positioning_layers/relative_absolute_badge/diagrams/position_schemes.semantic.json.
relative_absolute_badge.html 
<style>
.position-card { position: relative; padding: 24px; border: 2px solid #cbd5e1; }
.badge { position: absolute; }
.badge { top: 12px; right: 12px; }
.badge { background: #dc2626; color: white; padding: 6px 10px; border-radius: 999px; }
</style>

<article class="position-card">
  <h2>Deploy queue</h2>
  <p>Three reviews are waiting.</p>
  <span class="badge">3</span>
</article>
containing block A containing block is the box used to resolve positioned offsets.
absolute positioning Absolute positioning removes an element from normal flow and places it by offsets.