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

The solution was to better understand how z-indexing works. The popup is set inside the marker (to make is work with just css :hover), so it is the child of the parent marker element. Z-index is inherited from parent elements, and child elements cannot have a z-index higher than its parent. That's just how z-indexing works. So, setting z-index on the popup element is ignored by the browser, because leaflet has set a z-index for the marker.

The fix was to use a css rule that tells the browser to lower the z-index of all other markers, when a marker is hovered over:

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

See here for a full working example:

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

Leaflet markers have a riseOnHover property, which makes the marker appear on top of other markers on hover.

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

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