css - 使其他标记位于自定义 divIcon 弹出窗口下方，而不是位于顶部

Question

背景:我有一个桌面浏览器应用程序，它使用带有 leaflet js 插件的 mapquest。我为标记使用 divIcon 类，这允许我为标记使用自定义 HTML 和样式。每个 divIcon 标记还包含一个隐藏的 div，当鼠标悬停在标记上时(使用 :hover 类)显示该 div。我没有使用传单中内置的默认标记或默认弹出窗口，因为自定义 html 可以更好地控制样式。

问题:显示弹出窗口时， map 上的任何其他标记都显示在弹出窗口的顶部，而不是下方。我已经尝试将弹出 div 的 z-index 设置为一个非常高的数字，但它没有帮助。

预期结果:当您将鼠标悬停在图标上时，标记应该位于弹出窗口的后面，而不是前面。

这不是一个重复的问题:这个问题与 this one 不同.这个问题是关于让默认的传单弹出窗口位于 map z-index 上下文之外的自定义 div 之上。这个问题是关于一个自定义的鼠标悬停弹出窗口(不是默认的弹出窗口)停留在其他标记之上。另外，我的解决方案与作为解决方法提出的公认的 javascript“hack”完全不同。

问题的工作示例: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>
  `,
});

最重要的 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

解决方案是更好地了解 z-indexing 的工作原理。弹出窗口设置在标记内(仅使用 css :hover 即可制作)，因此它是父标记元素的子元素。 Z-index 继承自父元素，子元素的 z-index 不能高于其父元素。这就是 z-indexing 的工作原理。因此，在弹出元素上设置 z-index 会被浏览器忽略，因为 leaflet 已经为标记设置了 z-index。

解决方法是使用一个 css 规则，告诉浏览器在将鼠标悬停在某个标记上时降低所有其他标记的 z-index:

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

有关完整的工作示例，请参见此处:

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