Absolutely positioned element in the DOM but it's not visible at all with a z-index of 70
Somehow the console logs show the right flag changing from true to false, affecting its insertion in the DOM, yet it's not visible at all, only when I hover over the element in the DOM, as seen in the gif. What can I do about this? Its direct parent is relatively positioned...
2 Replies
Without seeing more of the code it is a bit tricky to see exactly what is going on.
That said, when you use
position: relative (or absolute) you create a new stacking index for that element and for it's children. Defining z-index: 70 on one of the children will only define the z-index relative to the parent, not to other elements in the DOM.
In your code, the "main" container, which is defined after the nav parent section, also has position: relative so this new stacking index is placed "above" the previous one.
So, for what you want to work (I presume you have a hidden submenu that you want to display on top of the image), I suspect that you need to set the z-index on the nav parent "section". Of course this may have other side-effects that you might need to resolve.i actually managed to solve it by changing position absolute to fixed, and for some reason it appeared... thanks for your reply though!