views:

6670

answers:

10

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!

+2  A: 

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;)!

andyuk
A: 

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

davebug
The menus are built in a template... I'm not sure I can control that. That's why I was asking for a way to change the Google Map's z-Index
[ebarrera]
A: 

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.

Diodeus
+1  A: 

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

Anutron
+5  A: 

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.

Jeremy Wadhams
That's a very useful article you linked. Thanks!
Andy Stewart
A: 

"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!

Chris
A: 

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?

Emmanuel
A: 

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 :(

Paolo
A: 

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

Bill Citrine
A: 

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)

Totoro