Question

How do I send Bing Maps to the back of my web page? I have a header that should be always on top, but I can’t figure out how to put it in the foreground of Bing Maps. As shown in the print screen (can be found here), everything goes behind the header, except the map.

I already tried the z-index, but without any luck. Does someone has an idea how to do this?

Thanks in advance.

Answer 1

for z-index to work properly, try explicitly setting the position attribute of the map and your top bar, as well as the display attribute.

Try this:

#top_bar {
  display:block;
  position:relative;
  z-index:10;
}


#map {
  display:block;
  position:relative;
  z-index:5;
}

You don’t have to set any of the directional attributes for the position (like top, left, etc..) so it won’t change it’s actual position. Additionally here is a good read as to why: http://www.yourinspirationweb.com/en/css-how-to-use-the-z-index-property/