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

Below solution should work but I don't know if you have a requirement like keeping nav-bar outside map-container. If so I don't think that there is a workaround for that.

CSS:

#tooltip-helper{
    position:relative;
    /*below properties are to demonstrate the helper*/
    width:10px;
    height:10px;
    background-color:green;
    top:200px;
    left:200px;
}

#tooltip
{
    position:absolute;
    top:10px;/*this is just to make sure helper is visible*/
    left:-100px;/*this is to center the tooltip*/
    width: 200px;
    height: 200px;
    background-color: yellow;
    color: black;
    padding: 10px;
    z-index: 15;
}

HTML:

    

      The nav bar
    
    This is the map container
    

          
This is the Tooltip