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.

If you remove the `z-index` from the `map-container`, and change it to `position: absolute`, and add `position: absolute` to the tooltip, the stack order seems to be fine: http://jsbin.com/qaquxiyufa/1/edit?html,output Just I do not understand why... (And I guess this is not acceptable for you...) — Lajos Veres, Oct 20 '17 at 12:34

score 17 · Accepted Answer · answered Dec 29 '11 at 14:22

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.

score 2 · Answer 2 · answered Dec 29 '11 at 23:27

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:

<div id="map-container">
    <div id="nav-bar">
      The nav bar
    </div>
    This is the map container
    <div id="tooltip-helper">
          <div id="tooltip">This is the Tooltip</div>
    </div>
</div>

score 0 · Answer 3 · answered May 05 '16 at 23:23

For future readers with similar problems - If your conflicting child items are position: fixed, consider setting the height of the parent containers to 0px, and then shifting any parent background display settings onto a mutual grandparent of the conflicting children.

This solved my analogous delimma.

score 0 · Answer 4 · edited Nov 16 '17 at 14:55

0

If, in the real page, the tooltip has to be shown only on hovering the map container, you could just change dynamically its z-index like so:

#map-container:hover
{
    z-index: 16
}

Otherwise you need to change the position of the tooltip so that the nav-bar doesn't overlap it.

edited Nov 16 '17 at 14:55

answered Dec 20 '11 at 10:15

Fabrizio Calderan

120,726
26
164
177

score 0 · Answer 5 · answered Dec 20 '11 at 10:16

0

You have to absolutely position nav-bar and tooltip (otherwise z-index won't be taken in account), and maintain map-container static positioned

#map-container{
    ...
    position: static;
    ...
}

#nav-bar{
    ...
    position: absolute;
}

#tooltip{
    ...
    position: absolute
}

answered Dec 20 '11 at 10:16

I.G. Pascual

5,818
5
42
58

I cannot find `tooltip` in your page. Did you change it to absolute position? – I.G. Pascual Dec 20 '11 at 11:30
but i need to keep the #map-container as fixed since it's a map occupying the whole page, check http://41.32.148.178:82/#!search=KFC%2F0%2F0%2F0%2F%2F – Yehia A.Salam Dec 29 '11 at 13:29
It's almost impossible the way it is... you'll need to wrap the panel within mapcontainer. Or change ALL the styles in your page again – I.G. Pascual Dec 29 '11 at 16:47

score 0 · Answer 6 · answered Dec 29 '11 at 19:36

I think the only way you can do this with a position: fixed on the #map-container is to restructure your tool tips to display outside the #map-container. So on click of the icon "inside" the map container, the tool-tip itself is displayed above both (with a proper z-index set).

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

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

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

Charming Prince · Answer 7 · 2011-12-30T03:51:20.610

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

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

This keeps the #tooltip on top....

z-index between Children and Parents

7 Answers7

Linked