Z-index orders elements within stacking contexts. A child cannot escape its ancestor’s stacking context merely by choosing a huge number.
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 tooltip inside a lower context stays below a sibling overlay in a higher context. 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: Draw the context hierarchy
Identify ancestors creating stacking contexts, including relevant positioning, transforms and opacity.
Step 2: Compare sibling contexts
A child’s large z-index cannot outrank a sibling ancestor context that is painted above its parent.
Step 3: Move the overlay appropriately
Adjust context ownership or render the tooltip in a suitable top-level layer. Check clipping as a separate problem.
Worked scenario
A tooltip inside a lower context stays below a sibling overlay in a higher context.
Parent A is at z-index one, sibling B at two. A’s tooltip at 9999 remains inside A’s lower context. Raising the tooltip’s number repeatedly cannot escape that hierarchy. Moving it to an appropriate overlay owner can solve stacking, but overflow clipping or coordinate calculation may still require separate corrections.
Common mistake
Arbitrary escalating z-index values hide the hierarchy problem.
Verify the behavior
Inspect stacking ancestors and overflow rules. Verify the tooltip stays visible over the intended siblings without covering unrelated modal content.
Interview exercise
Fix a trapped tooltip.
Answer and reasoning
Adjust context ownership or place the overlay in an appropriate top-level layer; verify clipping separately.
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.