z-index between Children and Parents

Question

I'm having problems working out the z-index order for an application we're working on, i have two root parents, a nav bar and a map, and one child, the map tooltip. The navbar should be visible above the map, so it has a higher z-index, but the problems is to make the tooltip in the map container to be displayed over the sidebar as well, a bit hard to explain, so you can visualize the case on http://jsbin.com/afakak/2/edit#javascript,html,live :

 <div id="nav-bar">
    The nav bar
  </div>

  <div id="map-container">
      This is the map container
      <div id="tooltip">
            This is the Tooltip
      </div>
  </div>

Thanks for any help.

Answer 1

If #map-container is positioned (i.e. not static), this is not possible, because of the way z-index is compared:

body (or any other positioned parent element) is the reference for both #map-container and #nav-bar. Any z-index you give them is calculated in respect to the parent element. So the one of the 2 elements with the higher z-index will be rendered above the other one and all its child elements. Z-index of #tooltip will only be compared with other children of #map-container.

You could do as Nacho said and statically position #map-container. You can simulate fixed positioning via Javascript, if you like.

If you cannot do that, you need to change your markup, so that #nav-bar and #tooltip have a common positioned parent element. Either move #nav-bar inside #map-container, or #tooltip out of it.