Spraw, aby inne znaczniki znalazły się poniżej niestandardowego wyskakującego okna divIcon zamiast na górze.

Question

BACKGROUND: Mam przeglądarkę komputerową, która korzysta z mapquestu z wtyczką js. Używam klasy divIcon dla znaczników, co pozwala mi używać niestandardowego kodu HTML i stylizacji dla znaczników. Każdy znacznik divIcon zawiera również ukryty element div, który jest wyświetlany po obróceniu znacznika (za pomocą: hover class). Nie używam domyślnego znacznika lub domyślnego popup'a wbudowanego w ulotkę, ponieważ niestandardowy html zapewnia znacznie lepszą kontrolę nad stylizacją.

PROBLEM: Kiedy pojawi się wyskakujące okienko, wszystkie inne znaczniki na mapie pojawiają się na górze wyskakującego okienka, zamiast pod spodem. Próbowałem ustawić z-index popup div na naprawdę wyższy numer, ale to nie pomaga.

CO OCZEKIWA SIĘ: Po ustawieniu wskaźnika myszy nad ikoną znaczniki powinny znajdować się za wyskakującym okienkiem, a nie na wierzchu.

TO NIE JEST POWAŻNE PYTANIE: To pytanie nie jest tożsame z this one. Pytanie dotyczyło pozostawienia domyślnych wyskakujących okienek na górze niestandardowego elementu div, który znajduje się poza kontekstem mapy z-index. To pytanie dotyczy niestandardowego wyskakującego okienka myszy (nie domyślnego wyskakującego okienka) znajdującego się nad innymi znacznikami. Dodatkowo, moje rozwiązanie różni się całkowicie od tego, co napisano w języku JavaScript jako "obejście".

przykład roboczych problem: https://jsfiddle.net/mrrost/py2bqw7j/

Oto co Divicon kod z niestandardowy znacznik/popup wygląda następująco:

var pin = L.divIcon({ 
    html: ` 
    <div class='marker'> 
     Pin 
     <div class='popup'> 
     Marker info. Other markers WILL BE on top of this div. 
     This is BAD and a PROBLEM. 
     </div> 
    </div> 
    `, 
}); 

tej najważniejszej definicje CSS:

#map { 
    position: fixed; 
} 

/* hide default leaflet pin; div.popup is put inside here */ 
.leaflet-marker-icon { 
    border: 0; margin: 0; padding: 0; 
}  

div.popup { 
    display: none; 
    position: absolute; 
} 

div.marker:hover div.popup { 
    display: block; 
} 

Answer 1

Rozwiązaniem było aby lepiej zrozumieć, jak działa indeksowanie z-Z. Wyskakujące okienko jest ustawione wewnątrz znacznika (w celu wykonania jest to tylko z css: hover), więc jest dzieckiem elementu nadrzędnego znacznika. Indeks Z jest dziedziczony z elementów nadrzędnych, a elementy potomne nie mogą mieć wyższego indeksu Z niż jego element nadrzędny. Tak właśnie działa indeksowanie z-Z. Zatem ustawienie indeksu z elementu popup jest ignorowane przez przeglądarkę, ponieważ ulotka ustawiła indeks Z dla znacznika.

Rozwiązaniem było zastosowanie reguły CSS, który informuje przeglądarkę, aby obniżyć z-index wszystkich innych markerów, gdy znacznik jest unosił się nad:

.leaflet-marker-icon:not(:hover) { 
    z-index: 0 !important; 
} 

Zobacz tutaj, aby uzyskać pełną przykład pracy:

https://jsfiddle.net/mrrost/tdr45764/