Google Maps, Z Index and Drop Down Javascript menus

Question

I've run on a little problem today: I have a JS drop down menu and when I inserted a GoogleMap... the Menu is rendered behind the Google Map... Any ideas on how to chance the z Index of the Google Map?

Thanks!

Answer 1

Have you tried increasing the z-index of your drop down menu?

From W3Schools CSS z-index Property:

The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Note: Elements can have negative stack orders.

Note: Z-index only works on elements that have been positioned (eg position:absolute;)!

Answer 2

Try setting your menu z-index insanely high. Apparently Google Maps uses a range from -9000000 to 9000000.

Answer 3

Wrap the map in a DIV, give that DIV a z-index of 1. Wrap your drop-down in a DIV and give it a higher value.

Answer 4

Note that dropdown menus in some browsers (ahemIE*ahem) cannot be zPositioned at all. You'll need to use an "iframe shim" to obscure it or hide the dropdown entirely if you want to position something above it. See: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

Answer 5

If your problem happens in Internet Explorer, but it renders the way you'd expect in FireFox or Safari, this link was extraordinarily helpful for me with a similar problem.

It appears to boil down to the idea that marking an element as "position:relative;" in CSS causes IE6&7 to mess with it's z-index relative to other elements that come before it in the HTML document, in unintuitive and anti-spec ways. Supposedly IE8 behaves "correctly" but I haven't tested it myself.

Anutron's advice is going to be really helpful if your problem is with a <SELECT> form element, but if you're using JavaScript to manipulate divs or uls to act like a drop down I don't think it's going to help.

Answer 6

"Wrap the map in a DIV, give that DIV a z-index of 1. Wrap your drop-down in a DIV and give it a higher value."

Worked perfectly for me using google maps and a javascript drop down menu. Thanks!

Answer 7

It didn't work for me :( I have placed my map inside a div and given it a Z-index of 1, and the javascript "DropDown" (which is actually a color picker) an index of 90000000 !important.

Any other ideas?

Answer 8

the map is already wrapped inside a div. anyway, give it a negative z-index and it works - with one caveat: the gmaps controls aren't clickable :(

Answer 9

If your menu is wrapped in a div container e.g. #menuWrap then assign it position relative and give it a high z-index.... e.g. #menuWrap { position: relative; z-index: 9999999 }

Make sure your map is inside a div

Answer 10

IE gives the problem

every div that is wrapped in a relative positioned div will start a new z-index in IE. The way IE interprets the outer relative divs, is in order of html. Last defined is on top. No matter what the z-indexes of the divs inside the relative positioned divs are.

Solution for IE: define the div that should be on top at last in html.

(So z-index does work in IE, but only per holder div, every holder div is independent of other holder divs)