Question

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

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

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

这不是一个重复的问题：这个问题与this one不同。这个问题是关于让默认的传单弹出窗口保持在地图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索引的工作原理。弹出窗口设置在标记内（使得仅使用css：hover），因此它是父标记元素的子元素。 Z-index继承自父元素，而子元素的z-index不能高于其父元素。这就是z-indexing的工作原理。因此，浏览器会忽略在弹出元素上设置z-index，因为传单已为标记设置了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弹出窗口下方，而不是在

2 个答案: