CODEWITHSUNDEEP
cssz-index
Yehia A.Salam
Yehia A.Salam

Reputation: 2078

z-index between Children and Parents

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.

Upvotes: 7

Views: 14036

Answers (7)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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.

Upvotes: 0

Eleanor Zimmermann
Eleanor Zimmermann

Reputation: 432

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.

Upvotes: 0

Charming Prince
Charming Prince

Reputation: 489

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

Upvotes: 0

osoner
osoner

Reputation: 2415

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>

Upvotes: 2

ScottS
ScottS

Reputation: 72261

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>

Upvotes: 0

Residuum
Residuum

Reputation: 12064

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.

Upvotes: 17

I.G. Pascual
I.G. Pascual

Reputation: 5965

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
}

Upvotes: 0

Related Questions