Z-index between children and parents

Question

I'm having problems developing the z-index order for the application we're working on, I have two root parents, a navigation bar and a map, as well as one child, a map hint. The navigation bar should be visible above the map, so it has a higher z index, but the problem is to make the tooltip in the map container appear above the sidebar, which is a little difficult 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 positioned (i.e. not static), this is not possible because the z-index is compared:

body (or any other positioned parent) is a reference for both #map-container and #nav-bar . Any z-index you give them is computed against the parent element. Thus, one of the two elements with a higher z-index will be displayed over the other and all its children. The #tooltip z-index will only be compared with other child elements of #map-container .

You can do as Nacho said and statically position #map-container . You can simulate fixed positioning through Javascript if you want.

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

Answer 2

The solution below should work, but I do not know if you have a requirement to store nav-bar outside the map-container . If so, I don't think there is a workaround for this.

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> 

Answer 3

If on a real page the tooltip needs to be shown only when the map container hangs, you can simply dynamically change your z-index like this:

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

Otherwise, you need to reposition the tooltip so that the nav-bar does not overlap it.

Answer 4

You must fully position nav-bar and tooltip (otherwise z-index will not be taken into account) and support map-container static positions

 #map-container{ ... position: static; ... } #nav-bar{ ... position: absolute; } #tooltip{ ... position: absolute } 

Answer 5

I think the only way to do this with position: fixed in #map-container is to restructure your tooltips to display outside of #map-container. So, by clicking the "inside" map container icon, the -tip tool appears above both (with the correct z-index ).

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

Answer 6

Going through my 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 is not located. The Z-index property will only work if it has one of the values ​​of the position property. And given that you want the tooltip to stand out, you should use an 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 holds #tooltip on top ....

Answer 7

For future readers with similar problems - If your conflicting children are position: fixed , consider setting the height of the parent containers to 0px, and then move the parent background settings to the mutual grandparents of the conflicting children.

This solved my similar dividend.