Hopefully I’ll be able to explain this well enough without an example…
I have two instances of wonky z-index. Let me explain each:
1) I have a navbar with a dropdown using a css3 slide transition and jquery with positioning to move into place. I set the z-index for the navbar as 100, and the z-index for the dropdown as 90. The navbar has a shadow which I would like go over the drop down menu, but currently wont. Also, the dropdown slides down over the navbar, while it should go under.
2) I have a footer which is basically the same problem above, just inverted. No shadow overlap. Haven’t implemented the transition yet, but I’m sure it will do the same thing.
Before you answer with the obvious, all the elements in question are positioned.
I’m hoping to be able to solve this without having to come up with an example, because this is part of a big project with lots and lots of pieces. Since there’s no example, I don’t expect the answer to be simple, but maybe you could point me in the right direction?
Let me know if you have any questions. Thanks so much!
EDIT
I made a quick sample, posted in the comments. The transition doesn’t work but the shadow from the nav isn’t covering the dropdown
This isnt going to work as your elements are nested and z-index is an inherited property. Youll have to separate them out so that theyre on the same dom level (not parenrs or children) before changing any z-indexes.
Id fix you an example but im on my phone. When i reach a computer ill update. 🙂