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

Question

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

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

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

这不是一个重复的问题：这个问题与不同。这个问题是关于让默认的传单弹出窗口位于地图 z-index 上下文之外的自定义 div 之上。这个问题是关于一个自定义的鼠标悬停弹出窗口（不是默认的弹出窗口）停留在其他标记之上。另外，我的解决方案与公认的 javascript "hack" 提出的解决方法完全不同。

问题的工作示例：https://jsfiddle.net/mrrost/py2bqw7j/

这里是 div带有自定义 marker/popup 的图标代码：

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/

Answer 2

传单标记有一个 riseOnHover 属性，这使得标记在悬停时显示在其他标记之上。

const marker = L.marker([50.5, 30.5], { riseOnHover: true }).addTo(map);

见https://leafletjs.com/reference-1.6.0.html#marker-riseonhover

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

Make other markers go below custom divIcon popup, instead of on top

css

mapquest

leaflet