Absolute positioning is relative to its containing block, which is often established by a positioned ancestor. Fixed positioning has additional ancestor-related exceptions.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: A badge positions correctly when its card establishes the intended containing block. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Locate the positioned element
Record whether the badge is absolute or fixed; their containing-block rules differ.
Step 2: Inspect ancestors
Find positioned and transformed ancestors that may establish the relevant containing block.
Step 3: Establish intentional ownership
Position the card relatively when its badge should align to that card’s edges.
Worked scenario
A badge positions correctly when its card establishes the intended containing block.
.card { position: relative; }
.badge { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; }The badge now belongs spatially to the card. Moving the card also moves its badge. A fixed overlay may behave unexpectedly inside transformed ancestors, so inspect actual ancestry before increasing offsets.
Common mistake
Adding transforms can change containing-block behavior and surprise fixed overlays.
Verify the behavior
Move the card into different layouts and add a transformed ancestor. Compare absolute and fixed behavior with developer tools.
Interview exercise
Diagnose a misplaced badge.
Answer and reasoning
Inspect ancestor positioning and transforms, then identify which containing block the browser actually uses.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.