Good day,
Can anyone explain why the bg animation in my header goes over the top of my menu. Background is set to 1 px z index and the menu set to z index 999.
Any help would be greatly appreciated
Hi there,
Z-index behavior can be tricky due to how stacking contexts work in CSS. Here’s what you need to know:
The z-index property only works on positioned elements (relative, absolute, or fixed). Additionally, z-index values are only compared within the same stacking context - meaning elements can only be stacked relative to their siblings, not to elements in different parent containers.
To resolve stacking issues between your background and menu elements:
- Ensure both elements have position properties set (relative, absolute, or fixed)
- Check if they share the same parent container
- If they’re in different containers, adjust the z-index of their parent elements instead
- Verify there are no other stacking contexts created by transforms, opacity, or filters that might affect the hierarchy
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.