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 na

Answer 1

After going through, your codes, i noticed this.

 #tooltip{
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
    }

Your #tooltip has a z-index, but it's not positioned. Z-index property will only work if it's has one of the position property value. And considering you want the tooltip to stand out, you should use the absolute position value like this.

 #tooltip{
position: absolute;
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
 }

HTML

The nav bar
    
  This is the map container
  

        This is the Tooltip
  
        

This keeps the #tooltip on top....