अन्य मार्कर कस्टम divIcon पॉपअप के नीचे जाएं

Question

पृष्ठभूमि के लिए: मेरे पास एक डेस्कटॉप ब्राउज़र ऐप है जो पुस्तिका जेएस प्लगइन के साथ मैपक्वेट का उपयोग करता है। मैं मार्करों के लिए divIcon क्लास का उपयोग कर रहा हूं, जो मुझे मार्करों के लिए कस्टम HTML और स्टाइल का उपयोग करने की अनुमति देता है। प्रत्येक divIcon मार्कर में एक छिपी हुई div भी होती है जो मार्कर पर आच्छादित होती है (इसका उपयोग करके: होवर क्लास)। मैं न तो डिफ़ॉल्ट मार्कर या डिफ़ॉल्ट पॉपअप का उपयोग कर रहा हूं, क्योंकि कस्टम एचटीएमएल स्टाइल पर ज्यादा बेहतर नियंत्रण देता है।

समस्या: जब पॉपअप दिखा रहा है, मानचित्र पर किसी भी अन्य मार्कर पॉपअप के शीर्ष पर दिखाए जाते हैं, इसके बजाए। मैंने पॉपअप div की जेड-इंडेक्स को वास्तव में उच्च संख्या में सेट करने का प्रयास किया है, लेकिन इससे मदद नहीं मिलती है।

क्या अपेक्षित है: जब आप माउस पर माउस को घुमाते हैं, तो मार्कर पॉपअप के पीछे होना चाहिए, सामने नहीं।

यह एक उचित प्रश्न नहीं है: यह प्रश्न this one जैसा नहीं है। यह प्रश्न डिफ़ॉल्ट लिफ़ालेट पॉपअप को कस्टम div के शीर्ष पर रहने के बारे में था जो मानचित्र z-index संदर्भ के बाहर है। यह प्रश्न अन्य मार्करों के ऊपर रहने वाले कस्टम माउसओवर पॉपअप (डिफ़ॉल्ट पॉपअप नहीं) के बारे में है। इसके अलावा, मेरा समाधान एक वर्कअराउंड के रूप में आगे स्वीकृत जावास्क्रिप्ट "हैक" से अलग है।

समस्या के काम उदाहरण: https://jsfiddle.net/mrrost/py2bqw7j/

यहाँ के साथ कोड divIcon है कस्टम मार्कर/पॉपअप लगता है:

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> 
    `, 
}); 

यह सबसे महत्वपूर्ण सीएसएस परिभाषाएँ:

#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

समाधान था बेहतर समझने के लिए कि जेड-इंडेक्सिंग कैसे काम करता है। पॉपअप मार्कर के अंदर सेट किया गया है (बनाने के लिए केवल सीएसएस: होवर के साथ काम करना है), इसलिए यह माता-पिता मार्कर तत्व का बच्चा है। जेड-इंडेक्स मूल तत्वों से विरासत में मिला है, और बाल तत्वों के पास अपने माता-पिता से ज़ेड-इंडेक्स अधिक नहीं हो सकता है। यह सिर्फ जेड-इंडेक्सिंग काम करता है। इसलिए, पॉपअप तत्व पर जेड-इंडेक्स को ब्राउज़र द्वारा अनदेखा किया जाता है, क्योंकि पुस्तिका ने मार्कर के लिए जेड-इंडेक्स सेट किया है।

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

यहाँ एक पूर्ण काम कर उदाहरण के लिए देखें:

ठीक एक सीएसएस नियम यह है कि ब्राउज़र बताता है अन्य सभी मार्करों के z- सूचकांक कम करने के लिए, उपयोग करने के लिए जब एक मार्कर पर होवर किया है था

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