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

Question

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

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

什么是预期:当您将鼠标悬停在图标上时,标记应位于弹出窗口后面,而不是在前面.

这不是一个重复的问题:这个问题是不一样的这一个.这个问题是关于让默认的传单弹出窗口保持在地图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/