Normal flow
Every box starts as position: static, the default. Static boxes sit in normal flow: inside the card, each block goes below the one before it, in the order of the HTML. First the NEW tag, then A, B and C.
Relative
Give box B position: relative. B is now a positioned box, but nothing moves yet. A relative box stays exactly where normal flow put it until you also give it an offset, such as top or left.
top: 20px pushes B 20px down and left: 30px pushes it 30px right. Its old space stays reserved (dashed), so C does not move. B is positioned, so it is painted on top of C.
Absolute
position: absolute takes the tag out of normal flow. A, B and C close up as if it were not there. With no top, right, bottom or left yet, the tag stays at its old spot, now drawn over A.
top and right measure from the tag's containing block. No ancestor is positioned, so that is the initial containing block: a viewport-sized box at the top of the page. The tag jumps to its top right corner.
Give the card position: relative. Now it is the tag's nearest positioned ancestor, so it becomes the containing block. The same top: 0; right: 0; pins the tag to the card's top right corner.
Fixed
Change absolute to fixed. A fixed box is placed against the viewport, the part of the page you can see in the window. The card no longer matters, so the tag goes back to the window's top right corner.
Scroll down 60px. The card and its boxes move up with the page, but the fixed tag stays in the corner of the window. An absolute tag would have scrolled away with its card.
What happens
;; step 1/8 · flow
index.html, in <body>:
<div class="card">
<div class="tag">
NEW</div>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
all static: one below the other (CSS px)
.tag x 28, y 28, 48×24
.a x 28, y 60, 120×40
.b x 28, y 108, 120×40
.c x 28, y 156, 120×40
A real browser lays out the page once with all the rules in force. The figure adds one rule at a time so you can see what each line does. The window is 320 by 240 CSS px. The .more box stands in for the rest of a long page, so there is something to scroll. The figure ignores the scrollbar (overlay scrollbars, as on phones, take no space).