Absolute Positioning

Anchor a removed box to the nearest positioned ancestor

1. Establish a containing block

The dashed stage is relative, so its bottom-right marker uses the stage edges.

Positioned stage

right + bottom

2. Anchor a badge to a card

The card is relative. The badge is absolute and does not reserve space in the card.
New

Field Notebook

A practical anchored-label pattern

Extra padding or deliberate spacing keeps content clear of an overlapping badge.

Before using absolute

  1. Choose the ancestor that should provide the positioning edges.
  2. Position that ancestor, commonly with relative.
  3. Reserve enough space so the removed element does not cover content.
  4. Test narrow widths and changing text.

Important CSS

Absolute positions against the nearest positioned ancestor.

.stage { position: relative; }
.absolute-box {
  position: absolute;
  top: 16px;
  right: 16px;
}