z-index tra bambini e genitori

Question

Sto riscontrando problemi nell'elaborare l'ordine z-index per un'applicazione a cui stiamo lavorando, ho due genitori root, una barra di navigazione e una mappa e un bambino, la mappa tooltip. La barra di navigazione dovrebbe essere visibile sopra la mappa, quindi ha uno z-index più alto, ma il problema è rendere la descrizione del suggerimento nel contenitore della mappa da visualizzare anche sulla barra laterale, un po 'difficile da spiegare, in modo da poter visualizzare case su 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> 

Grazie per qualsiasi aiuto.

Answer 1

Se #map-container è posizionato (cioè non statica), questo è non è possibile, a causa del modo indice z è confrontato:

body (o qualsiasi altro elemento genitore posizionato) è il riferimento sia #map-container e #nav-bar. Qualsiasi z-index dato viene calcolato rispetto all'elemento padre. Quindi uno dei 2 elementi con l'indice z più alto sarà reso sopra l'altro e tutti i suoi elementi figli. L'indice Z di #tooltip verrà confrontato solo con gli altri figli di #map-container.

Si potrebbe fare come ha detto Nacho e posizionare staticamente #map-container. Puoi simulare il posizionamento fisso tramite Javascript, se lo desideri.

Se non è possibile farlo, è necessario modificare il markup, in modo che #nav-bar e #tooltip abbiano un elemento padre posizionato in comune. Spostare #nav-bar all'interno di #map-container o #tooltip.

Answer 2

Se, nella pagina vera e propria, il tooltip deve essere mostrato solo sul bilico del contenitore carta, basta solo cambiare dinamicamente il suo z-index in questo modo:

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

altrimenti è necessario cambiare la posizione di tooltip in modo che lo nav-bar non si sovrapponga a esso.

Answer 3

È necessario posizionare assolutamente nav-bar e tooltip (altrimenti z-index non sarà presa in considerazione), e mantenere map-container statico posizionato

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

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

#tooltip{ 
    ... 
    position: absolute 
} 

Answer 4

Credo che l'unico modo è possibile farlo con un position: fixed sul #map-container è quello di ristrutturare i suggerimenti strumento per visualizzare al di fuori del #map-container. Così il click sull'icona "dentro" il contenitore carta, viene visualizzato il tool-tip stesso sopra entrambi (con un set corretto 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

Sotto soluzione dovrebbe funzionare, ma non so se si dispone di un requisito come tenere fuori nav-barmap-container. Se è così, non penso che ci sia una soluzione per questo.

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

Dopo aver attraversato, i vostri codici, ho notato questo.

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

Il tuo #tooltip ha uno z-index, ma non è posizionato. La proprietà Z-index funzionerà solo se ha uno dei valori di proprietà della posizione. E considerando che vuoi che il tooltip risulti chiaro, dovresti usare il valore di posizione assoluto come questo.

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

Questo mantiene il #tooltip in cima ....

Answer 7

Per i futuri lettori con problemi simili - Se i tuoi elementi figlio in conflitto sono position: fixed, considerare impostare l'altezza dei contenitori padre a 0px, e quindi spostando qualsiasi sfondo genitore visualizza le impostazioni su un reciproco nonno dei bambini in conflitto.

Questo ha risolto il mio delimma analogo.