A badge meant for a card's top-right corner ends up at the top-right of the page. This does not mean absolute is broken. An absolutely positioned element looks for the nearest positioned ancestor to use as its reference box.
position: relative gives the parent a reference box
Each card with position: relative becomes the reference for its own position: absolute badge. The top and right offsets of 12px are measured from that card, and the badge is removed from normal document flow.
<article class="card">
<span class="badge">NEW</span>
<h2>Title</h2>
</article>.card { position: relative; }
.badge {
position: absolute;
top: 12px;
right: 12px;
}position: relative keeps .card in normal flow while making it the containing block for the badge. Because top and right are measured from the card's edges, the badge moves with the card in a list.
Place two cards side by side and check that each badge stays in its own top-right corner. If removing the parent's position: relative sends the badges elsewhere, their positioning reference changed. Finding the nearest positioned ancestor in DevTools is faster than changing offset numbers at random.
position: absolute removes an element from normal flow
An absolutely positioned element does not reserve space among its neighbors. A badge can therefore overlap a title without increasing the card's height. That can work for a decorative badge, but positioning an essential button or a long notice this way can cause overlap on a small screen.
For content whose order and height matter, consider flexbox or grid first. Use position when a particular element needs to overlap another part of the layout.
Do not solve stacking problems by raising z-index blindly
If the badge hides behind another element, inspect the stacking contexts first. Combinations of transform, opacity, or positioning and z-index can establish new stacking contexts. An arbitrary z-index: 9999 may only collide with a pop-up elsewhere. Keep elements that must overlap in the same component and set their order within the smallest necessary scope.
Key takeaways
position: absolute positions an element relative to its nearest positioned ancestor and removes it from normal flow. Give a card position: relative when a badge should stay attached to it. Prefer flexbox or grid for content layout, and inspect stacking contexts before changing z-index.
