z-index entre niños y padres

Tengo problemas para resolver el orden del índice z para una aplicación en la que estamos trabajando, tengo dos padres raíz, una barra de navegación y un mapa, y un hijo, la información sobre herramientas del mapa. La barra de navegación debe estar visible sobre el mapa, por lo que tiene un índice z más alto, pero el problema es hacer que la información sobre herramientas en el contenedor del mapa también se muestre sobre la barra lateral, un poco difícil de explicar, para que pueda visualizar el caso enhttp: //jsbin.com/afakak/2/edit#javascript,html,liv :

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

Gracias por cualquier ayuda

Respuestas a la pregunta(14)

Su respuesta a la pregunta