z-index entre Niños y Padres

Question

Tengo problemas para calcular el orden z para una aplicación en la que estamos trabajando, tengo dos padres raíz, una barra de navegación y un mapa, y un niño, el mapa información sobre herramientas. La barra de navegación debe ser visible sobre el mapa, por lo que tiene un índice Z más alto, pero el problema es hacer que la información sobre herramientas en el contenedor del mapa se muestre también en la barra lateral, un poco difícil de explicar, para que pueda visualizar el caso en 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> 

Gracias por cualquier ayuda.

Answer 1

Si #map-container está posicionada (es decir, no estática), esto es no es posible, debido a la forma se compara z-index:

body (o cualquier otro elemento padre posicionado) es la referencia para los dos #map-container y #nav-bar. Cualquier z-index que le dé se calcula con respecto al elemento principal. Entonces uno de los 2 elementos con el índice z más alto se representará por encima del otro y todos sus elementos secundarios. El índice Z de #tooltip solo se comparará con otros niños de #map-container.

Podrías hacer lo que dijo Nacho y posicionar estáticamente #map-container. Puede simular un posicionamiento fijo a través de Javascript, si lo desea.

Si no puede hacer eso, debe cambiar su marcado, de modo que #nav-bar y #tooltip tengan un elemento padre en la posición común. O mover #nav-bar dentro de #map-container, o #tooltip fuera de él.

Answer 2

Si, en la página real, el tooltip se ha de presentar sólo en cierne el contenedor mapa, usted podría cambiar dinámicamente su índice z de este modo:

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

lo contrario tienes que cambiar la posición del tooltip para que el nav-bar no se superponga.

Answer 3

Tienes que posicionar absolutamente nav-bar y tooltip (de lo contrario z-index no se tendrán en cuenta), y mantener map-container estático posicionado

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

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

#tooltip{ 
    ... 
    position: absolute 
} 

Answer 4

Creo que la única manera de hacer esto con un position: fixed en el #map-container es la reestructuración de sus extremidades de herramienta para mostrar fuera de la #map-container. Así que al hacer clic con el icono "dentro" del mapa del contenedor, se muestra la misma ventana de información encima de ambos (con un conjunto apropiado de 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 5

A continuación la solución debería funcionar, pero yo no sé si usted tiene un requisito como mantener nav-bar fuera map-container. Si es así, no creo que haya una solución para eso.

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 6

Después de pasar por, sus códigos, me di cuenta de esto.

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

Su #tooltip tiene un índice z, pero no está colocado. La propiedad Z-index solo funcionará si tiene uno de los valores de propiedad de posición. Y teniendo en cuenta que desea que la información sobre herramientas se destaque, debe usar el valor de posición absoluta de esta manera.

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

Esto mantiene el #tooltip en la parte superior ....

Answer 7

Para los futuros lectores con problemas similares - Si los elementos del niño en conflicto son position: fixed, se recomienda establecer la altura de los contenedores principales a 0px, y luego cambiando la configuración de visualización de fondo de los padres a un abuelo mutuo de los hijos en conflicto.

Esto resolvió mi delimma análogo.