I had a dropdown menu on another site that was above a carousel, but when selecting it, it would go behind the carousel. This is a problem I’ve encountered with z-index before and I thought I’d post the solution here. I basically used the agile carousel (js) on my homepage and the built-in wordpress dropdown menu in my top nav. And no matter how high I set the z-index on the downdown menu, as soon as the carousel rotated, it would appear on top (or in front of) the menu.

The solution lies in wrapping the carousel in a div and making sure that div has these properties:
display: block;
position: relative;
z-index: 0;

That’s because when the various divs in the carousel have their z-indexes adjusted up and down by javascript, those z-indexes are relative to the page; unless you wrap it in a div and give it the properties above. This way the div’s z-indexes are relative to it’s container. Without all three it will not work. Now the z-index of the dropdown menu only need be higher than the carousel’s highest z-index. But it probably wouldn’t hurt to just set it to 99999.