Tutorials
Claude Opus 5.5: Repair Product Menus Hidden Behind Headers
A product menu with z-index: 9999 can still sit behind a header.
Make it with Panelly
Turn inspiration into your next product ad
Bring a product image and an idea. Create a four-panel ad, a coordinated asset set, or a video with Panelly.
Create with Panelly Edit the brief before you generate.
A product menu with z-index: 9999 can still sit behind a header. Give Claude Opus 5.5 the menu's ancestor styles and the overlapping elements, then ask it to identify the stacking boundary before proposing a patch. Increasing the child's number cannot move it out of its parent's stacking context.
Separate three similar symptoms
A 2013 community question asks which properties create stacking contexts. Use the current MDN stacking-context guide for the rules: transforms, opacity below 1 and certain positioned z-index combinations can create contexts. Position: relative alone is not sufficient in every case.
| Symptom | Evidence to collect | First repair direction |
|---|---|---|
| Menu appears beneath a sibling header | Ancestor contexts and sibling ordering | Fix the relevant parent layer |
| Menu ends exactly at a card edge | Overflow and clipping styles | Address clipping separately |
| Fixed menu moves with a transformed card | Containing block and rectangles | Revisit positioning and its ancestor |
| Dialog remains above normal content | Whether it uses the browser top layer | Respect its separate layering model |
Work through a two-parent example
Assume a positioned card has z-index: 1 and a sibling header has z-index: 2. The card contains a menu with z-index: 9999. The explanatory paths [1, 9999] and [2] show why the header wins at the first boundary. Raising 9999 to 999999 does not change that comparison. Our local numeric fixture checks this simplified ordering only; it is not a browser implementation of the complete CSS painting algorithm or a tested Opus repair.
First decide whether the card needs its stacking context. Remove an unnecessary trigger only after checking the card's visual effects and layout. If the menu must cross that boundary, consider placing its overlay in an appropriate shared layer. A portal changes DOM placement; it does not automatically fix coordinates, clipping, event handling or focus. Preserve the trigger's accessible name and verify open, close and keyboard behavior after moving it.
Use an evidence-first repair prompt
Inspect this product menu, its trigger, every ancestor up to the document root, and the overlapping header. I will supply DOM, computed position/z-index/transform/opacity/overflow values and bounding rectangles.
Separate stacking, clipping and containing-block problems. Identify the first relevant boundary and explain the proposed fix using the actual ancestor chain. Do not raise every z-index or remove all transforms.
Return the smallest patch that preserves layout, animation and accessible naming. If moving the overlay, specify positioning updates, scrolling behavior, event handling and focus restoration. Test narrow and wide views, zoom, scroll, keyboard opening/closing and repeat mounting. Mark unexecuted checks pending and do not claim a successful browser repair without evidence.This is a proposed workflow using the official Opus prompting guide, not an executed model benchmark.
Accept the fix at the boundary
Capture the same menu state before and after the patch. Confirm that the intended menu is visible, unrelated content keeps its ordering, and the menu remains aligned while scrolling. Check clipping independently even when the layer comparison passes. Record browser, viewport and actual keyboard results.
**Should every overlay use the largest number?** No; numbers are meaningful within their stacking context. **Does moving to the body guarantee success?** No; positioning and interaction still need testing. For modal behavior, use the separate dialog focus guide.
Once the product presentation works, create companion campaign images in Panelly Studio. Panelly is not claimed to integrate Opus or automatically repair page CSS.
