I’ve got an odd z-index quandry
I’ve got an element with a high z-index which is laying UNDER an element with a lower z-index. Here is a REALLY dumbed down example.
<nav> <ul> <li class="one"> <ul class="hover"> <li>option1</li> <li>option2</li> <li>option3</li> </ul> </li> </ul> </nav> <main> <div> content <div class="special"> </div> </div> </main>
So if I hover over the li with class of one, the hover ul shows, positioned absolutely to the right of the list item being hovered. The hovered item has a z-index of 50. In the main content, the div with the special class has a z-index of 1, and there are no other containers in there with a z-index specified. But when I view it in the browser, the content of the div is placed on TOP of the hovered items.
Now one note is that the nav is position:fixed and I know that position fixed is a bit…funky…in terms of document flow. Could that be causing it? I tried adding position:relative in the hovered li, but that doesn’t seem to be enough.