Leaflet: z-index change breaks jQueryUI use
I've been using Leaflet 0.7.3 very successfully with jQueryUI. It is clear that the z-index values or logic has changed in 1.beta, as my own divs that were once working are now overlaid by Leaflet and jQueryUI modal dialog boxes are hidden underneath the map pane.
gaelicmichael
All 11 comments
cc @patrickarlt
mourner
on 29 Jul 2015
Yeah, the z-index values were bumped. Can you set up a JSFiddle to demonstrate the problem?
mourner
on 29 Jul 2015
I don't know about jQueryUI, but I had some divs over my map.
After updating to 1.0 beta 1 the were below the map so I just increased the z-index on my divs and it worked fine.
Eschon
on 30 Jul 2015
It's obvious how to modify my own CSS to give DIVs a larger z-index, but the issue is compatibility with a large library like jQueryUI, which had no previous problems. It's not reasonable to have to modify the jQueryUI code itself to enable inter-operability, though I haven't looked yet for means of specifying the use of z-index values for modals and other widgets -- I'm going to look this morning.
Regardless, the usage and values of z-index in Leaflet needs to be well documented in order for developers to anticipate such issues.
gaelicmichael
on 30 Jul 2015
This entry may help those with this problem: http://stackoverflow.com/questions/16917430/jquery-ui-1-10-dialog-and-zindex-option
gaelicmichael
on 30 Jul 2015
So, any chance to see a JSFiddle?
mourner
on 30 Jul 2015
See fiddle here: https://jsfiddle.net/onwu4kv6/
Seems like by default jQueryUI dialog z-index is 100 and default map pane has a z-index of 400.
jaymmartin
on 29 Jun 2016
This can be worked around very easily by manually specifying a lower z-index for the map.
The underlying problem is that the map panes share the same stacking context as the siblings of the map container. So it's not the z-index of the map container, it's the z-index of the panes.
I'm partial to add a isolation: isolate CSS rule to .leaflet-container, as this allows the map containers to forcefully have their own stacking context without forcing a specific z-index. Or set z-index:0 altogether so it works on IE also.
@jaymmartin Thanks for the fiddle!
IvanSanchez
on 30 Jun 2016
@IvanSanchez Why "partial to add isolation: isolate; and not just add it? What would be a reason not to?
jieter
on 15 Aug 2018
@jieter Browser support. See https://developer.mozilla.org/en-US/docs/Web/CSS/isolation#Browser_compatibility
IvanSanchez
on 15 Aug 2018
I just encountered a similar problem, with the leaflet map covering my hovering menu bar.
A simple fix could be to just add .leaflet-container {z-index:0} to the leaflet.css stylesheet. No?
JorisDebonnet
on 5 Sep 2019
Related issues
timwis
路
3Comments
ssured
路
3Comments
jcarenza
路
3Comments
jblarsen
路
3Comments
prbaron
路
3Comments
Most helpful comment
This can be worked around very easily by manually specifying a lower
z-indexfor the map.The underlying problem is that the map panes share the same stacking context as the siblings of the map container. So it's not the z-index of the map container, it's the z-index of the panes.
I'm partial to add a
isolation: isolateCSS rule to.leaflet-container, as this allows the map containers to forcefully have their own stacking context without forcing a specific z-index. Or setz-index:0altogether so it works on IE also.@jaymmartin Thanks for the fiddle!