Positioning takes an element out of the flow and stacking decides which painted last. Both are needed occasionally, and both fail in the same way: the element is somewhere you did not expect, and the reason is a container you forgot about.
About 1 min of reading
Anchor a badge to a card.
Without the anchor
Before you run it, say out loud what it will print. Then open the answer.
Add the anchor
Before you run it, say out loud what it will print. Then open the answer.
An element removed from the flow leaves a gap where it was and no longer sizes its parent. That is why a page collapses when everything is absolute, and why the fix is usually flexbox instead.
When a positioned child lands in the wrong place, the answer is which container it is positioning against. Setting relative on the intended one and checking is faster than reasoning about the whole page.
A container set to relative becomes the reference for an absolutely positioned child. Without it, the child positions against the page, which is why a badge lands in the corner instead of on the card.
A high number inside a container that is itself low cannot rise above a sibling of that container. The number is not global, and finding the container that created the context is the fix.
A sticky element stays put while its container scrolls and stops at the container's edge. If it never sticks, the container is probably not scrolling, which is the usual cause.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.