z-index między dziećmi i rodzicami

Question

Mam problemy z ustaleniem kolejności z-index dla aplikacji, nad którą pracujemy, mam dwóch rodziców root, pasek nawigacji i mapę oraz jedno dziecko, mapę tooltip. Pasek nawigacyjny powinien być widoczny nad mapą, dlatego ma wyższy indeks z-Z, ale problem polega na tym, aby podpowiedź w kontenerze mapy była wyświetlana również na pasku bocznym, co jest nieco trudne do wyjaśnienia, dzięki czemu można wizualizować sprawa na 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> 

Dzięki za wszelką pomoc.

Answer 1

Jeśli #map-container jest ustawiony (nie statyczne), to jest nie jest możliwe, ze względu na sposób z współczynniku porównano

body (lub innego elementu nadrzędnego) umieszczone jest odniesienie zarówno #map-container i #nav-bar. Każdy podany przez ciebie z-index jest obliczany w odniesieniu do elementu nadrzędnego. Tak więc jeden z 2 elementów o wyższym indeksie Z będzie renderowany nad drugim elementem i wszystkimi jego elementami potomnymi. Indeks Z z #tooltip zostanie porównany tylko z innymi dziećmi z #map-container.

Możesz zrobić tak, jak powiedział Nacho i ustawić statycznie #map-container. Możesz symulować stałe pozycjonowanie przez JavaScript, jeśli chcesz.

Jeśli nie możesz tego zrobić, zmień znaczniki, aby #nav-bar i #tooltip miały wspólny umieszczony element nadrzędny. Przenieś #nav-bar wewnątrz #map-container lub #tooltip z tego.

Answer 2

Jeżeli w realnej strony, tooltip musi być pokazany tylko na unosić kontener mapy, można po prostu zmienić dynamicznie jej z-index tak:

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

W przeciwnym razie trzeba zmienić pozycję z tooltip, aby nav-bar nie zachodziło na niego.

Answer 3

Trzeba bezwzględnie umieścić nav-bar i tooltip (inaczej z-index nie będą brane pod uwagę) i utrzymać map-container statyczne ustawione

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

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

#tooltip{ 
    ... 
    position: absolute 
} 

Answer 4

Myślę, że jedynym sposobem można to zrobić z position: fixed na #map-container jest zrestrukturyzować swoje podpowiedzi do wyświetlenia poza #map-container. Więc po kliknięciu ikony „wewnątrz” kontenera mapy, wyświetlane jest samo narzędzie-tip powyżej (z odpowiednim zestawem 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

Poniżej rozwiązanie powinno działać, ale nie wiem, czy masz wymagania jak utrzymywanie nav-bar poza map-container. Jeśli tak, nie sądzę, że istnieje obejście tego problemu.

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

Po przejściu, kody, zauważyłem tego.

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

Twój #tooltip ma indeks Z, ale nie jest umieszczony. Właściwość Z-index działa tylko wtedy, gdy ma jedną z wartości właściwości position. A biorąc pod uwagę, że chcesz, aby podpowiedź się wyróżniała, powinieneś używać wartości bezwzględnej pozycji takiej jak ta.

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

To utrzymuje #tooltip na górze ....

Answer 7

Dla przyszłych czytelników z podobnymi problemami - Jeśli sprzeczne elementy potomne są position: fixed, rozważ ustawienie wysokości kontenerów nadrzędnych do 0 pikseli, a następnie zmieniając ustawienia wyświetlania tła nadrzędnego na wzajemną listę kontaktów dla dzieci będących w konflikcie.

To rozwiązało moją analogiczną delimę.