他のマーカーを上にではなくカスタムdivIconポップアップにする

Question

背景：私は、リーフレットjsプラグインでmapquestを使用するデスクトップブラウザアプリケーションを持っています。私はマーカーのためのカスタムHTMLとスタイリングを使用することができますマーカーのdivIconクラスを使用しています。各divIconマーカーには、マーカーがホバーオーバーされたときに表示される隠しdivも含まれます（ホバークラスを使用）。私は、カスタムHTMLはスタイリングをはるかに上手くコントロールできるので、リーフレットに組み込まれたデフォルトのマーカーもデフォルトのポップアップも使用していません。

問題：ポップアップが表示されているとき、マップ上の他のマーカーは、ポップアップの上に表示されず、下に表示されません。私は本当に高い数字にポップアップのdivのZ - インデックスを設定しようとしましたが、それは助けにはなりません。

予想されること：アイコンの上にマウスを置くと、マーカーはポップアップの後ろに表示され、前面には表示されません。

これは重複した質問ではありません。この質問はthis oneと同じではありません。その質問は、デフォルトのチラシポップアップを地図のz-indexコンテキストの外にあるカスタムdivの上にとどめることでした。この質問は、カスタムマウスオーバーポップアップ（デフォルトのポップアップではない）が他のマーカーの上にとどまっていることです。さらに、私のソリューションは、回避策として注目されているjavascriptの「ハック」とはまったく異なります。

問題の実例：

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

この最も重要なCSS定義を：ここでhttps://jsfiddle.net/mrrost/py2bqw7j/

がどのように見えるか、カスタムマーカー/ポップアップでコードをdivIconある

#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

解決しては、 z-indexingがどのように機能するかを理解することができます。ポップアップはマーカーの内側に設定されています（作成するにはちょうどcss：hoverで作業するため）、それは親マーカー要素の子です。 Z-インデックスは親要素から継承され、子要素はその親よりも高いZ-インデックスを持つことはできません。これはzインデックス作成の仕組みです。したがって、ポップアップ要素のz-indexの設定は、リーフレットがマーカーのZ-インデックスを設定しているので、ブラウザによって無視されます。

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

を完全な作業例についてはこちらをご覧ください：

マーカーがホバーされたときに修正は、すべての他のマーカーのzインデックスを下げるためにブラウザに指示CSSルールを、使用していた

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