Streaming live at 10am (PST)

Issue with z index


#1

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?


#2

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.


#3

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.


#4

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.


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.