I have a challenge regarding my navbar and a menu-overlay on this particular page: https://www.inno-ngin.com/
The problem: The menu overlay, that opens when the burger button in the navbar is clicked, has a smaller z-index then the navbar. The navbar itself has the highest z-index, as it always should be visible, also when the menu-overlay is opened.
On smaller screens, sometimes the links from the menu-overlay get behind the navbar. The links are visible (as the navbar’s bg-color is transparent), but not clickable.
As the menu overlay links lying in a div which is on the same DOM level as the navbar, the children (links) will be always behind the z-index of the navbar.
We now put a bigger top-padding on the menu-overlay link container - however, I guess there must be a nicer way to do that.
Please always provide a read-only link. Without it, answers can only be guessed, and be partial.
Luckily for you, you’re wrong
To make it simple, z-index is a strange beast that is acting in 2 different ways: it orders lone elements with a z-index value, whatever their position in the DOM is, UNLESS there’s a stacking context. When elements on the same DOM level have z-index defined, they become the context and only then their children are affected by the context.
Look, here, an element that’s deeper un the DOM can be placed over one that’s upper:
Understand this and you’ll never have a z-index headache ever anymore.
Read this experiment until the end, you’ll learn that stacking contexts are a bit more complex and can happen with other properties. http://z-index.webflow.io/
