Apologies if I’ve posted twice but I can’t find my previous post.
I’m having issues with some dropdowns that are in a column arrangement. Whatever I’ve tried with z indexes, I can’t get the dropdown list to appear on top of the dropdown toggles of the ones below. I’ve tried ridiculous z indexes (100000000000) to no avail. Any ideas?
Without your public link it’s nearly impossible to answer you.
But you can try to reset all your values and use increments of 10, also try to put the z-indexes at elements at the same level of hierarchy. Elments that are siblings. It works much better.
I’ve been battling with this for a while and the only solution which I found works is to have each dropdown on a different z index with the ones at the top of the page being higher in the z axis than the lower ones. This is extremely impractical as it means that I have to create a class for every single dropdown.
I don’t understand why if I have the dropdown toggle on z 1 and the list on z 1000, the list still appears underneath the toggles further down on the page.
1 Like
We can’t see exactly what is going on, but I would suggest that the z-index will only affect an element within the range of its own parent. Basically, if you’ve got a [nav] that is set to z-index 1 and inside that you’ve got [dropdown] set to z-index 9999, it is going to function as if it is set to z-index 1. You want to be sure that your navigation is set to z-index 9999 at the highest container level you can.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.