relative, absolute, fixed and sticky — relative to what?
Answer out loud or in your head first, then compare.
Answer
relative keeps the element's place in the layout and lets you shift it. absolute takes it out of the normal flow and positions it against the relevant containing block — often the nearest positioned ancestor.
CSS
.card { position: relative; }
.badge { position: absolute; top: 8px; right: 8px; }
.header { position: sticky; top: 0; }fixed usually refers to the viewport. sticky keeps its place and, while scrolling, sticks within the bounds of its container.
Pitfall: a transform on an ancestor can change the containing block of a fixed element. Sticky depends on the scroll container and needs a threshold, e.g. top. z-index: 9999 on its own can't escape its stacking context.
How did it go? Be honest — “Not yet” puts the question on your review list.