251
stacking context
also z-index
z-index only compares elements inside the same stacking context.
What is stacking context?
A stacking context is a local z-order group. opacity less than 1, transform, filter, position with a z-index, and will-change create one. A z-index of 9999 inside a context still paints under a sibling context that comes later. The big number does not escape its parent.
Why does stacking context matter when vibe coding?
A dropdown is hidden behind a card. The draft sets z-index: 99999 on the menu. The card’s parent has a transform, so the menu’s number is trapped. The next attempt is a portal nobody mentioned.
How do you do stacking context?
Find the context, do not inflate the number. Portals for menus and dialogs that must escape a transformed parent. One scale for layers: base, dropdown, dialog, toast.
How do you ask a model for stacking context?
Fix the stacking context for (menu). Do not raise z-index above 9999. If a parent has transform, opacity, or filter, portal the menu out. Use a small set of layers.
What goes wrong with stacking context?
A portal that escapes the context and also escapes the scroll container, so the menu floats away from its button.