CSS: z-index bug?

Question

I have a Photography Web Page that displays at the top corners flags to switch languages, and at the middle a drop-down menu (both position: fixed). Please, take a look: http://luis.impa.br/photo

If you shrink the window horizontally to the point that the flags go over the menu, you can see the flag OVER the menu. But if you inspect the element, you'll see that (the divs containing) the flags have z-index 90, while the menus have z-index 100.

How can this be? Shouldn't be the opposite? This happens both in Chrome (PC) and Dolphin (Android). Firefox works just fine. Is this a bug of the first two browsers? Same bug?

And if you think this is crazy, scroll the page down until you see the new red tags (now over the butterfly icon, for example) go over the menu. If you shrink the page, you can see the new marks going between the flag and the menu... Again, Firefox works perfect, while Chrome and Dolphin do this mess. Two browsers with the exact same bug??

Either I don't undersand how z-index works, or this is a bug. More likely, both.

Thanks!!

Answer 1

Nothing crazy in this! You have given z-index for the .ddsmoothmenu ul, which doesn't have a position with value, absolute or relative. So, the z-index doesn't work here! But for your case, this works:

div#centmenu {z-index: 100;}