[英]z-index not working as intended
I am currently working with Leaflet and Mapbox to create a custom map. 我目前正在使用Leaflet和Mapbox来创建自定义地图。 All has been working fine until I started to work on the popups.
一直都很好,直到我开始研究弹出窗口。
My situation: I have a custom navigation/control panel that will be used but it needs to be behind any open popups (which it currently is not). 我的情况:我有一个将使用的自定义导航/控制面板,但它需要在任何打开的弹出窗口后面 (它目前不是)。
I have prepared a JSFiddle and this screenshot 我准备了一个JSFiddle和这个截图
Part of my CSS is 我的部分CSS是
#map-nav {
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
}
.leaflet-popup-pane, .leaflet-popup {
z-index: 1000 !important;
}
The default leaflet classes have z-index
of 7 (I think), I just overwrote it to be 100% sure. 默认的传单类的
z-index
为7(我认为),我只是将其覆盖为100%肯定。 When inspecting the code in browser (FF/Chrome), I see that the z-index is set properly and no other element in the .leaflet-popup
has any z-index
set. 在浏览器(FF / Chrome)中检查代码时,我看到z-index设置正确,而
.leaflet-popup
没有其他元素设置了任何z-index
。
I have read that negative z-index
may solve this, but as I am working with multiple elements I'd really much like a less "hacky" solution - if there is one. 我已经读过负
z-index
可以解决这个问题,但是当我使用多个元素时,我真的非常喜欢一个不那么“hacky”的解决方案 - 如果有的话。 (JavaScript solutions are welcome as well, hence the tag) (欢迎JavaScript解决方案,因此标签)
As I can see from the code inspection, Leaflet sets some attributes to .leaflet-popup
which in terms of position are: transform: translate3d(..)
, bottom
and left
. 正如我从代码检查中看到的,Leaflet将一些属性设置为
.leaflet-popup
,就位置而言,它们是: transform: translate3d(..)
, bottom
和left
。
Any help is appreciated. 任何帮助表示赞赏。
Edit: 编辑:
I can put the #map-nav
inside #map-content
and it still won't work fiddle . 我可以把
#map-nav
里面#map-content
,它仍然是行不通的小提琴 。 However, when I try to imitate this without alle the map stuff, it does work . 然而,当我试图模仿这个而不是地图的东西, 它确实有效 。
The problem is that #map-nav
exists in an entirely different stacking context than the marker and its popup. 问题是
#map-nav
存在于与标记及其弹出窗口完全不同的堆叠上下文中。
The way you have it set up right now, the entire map is behind #map-nav
. 你现在设置它的方式,整个地图都在
#map-nav
后面。 So, changing the z-index on either #map-nav
or the .leaflet-popup-pane
won't really help. 因此,更改
#map-nav
或.leaflet-popup-pane
上的z-index将无济于事。
Disclaimer : This is a terrible, terrible hack.
免责声明 :这是一个可怕的,可怕的黑客攻击。 If you look into Leaflet's documentation and find a way to add your own widgets, I'd highly recommend doing that instead of this .
如果你看看宣传册的文档,并找到一种方法来添加自己的小部件,我会强烈建议这样做 ,而不是这个 。
That said, I have something which sort of works ( your mileage may vary ): 也就是说,我有一些工作( 你的里程可能会有所不同 ):
#map-nav
into .leaflet-map-pane
#map-nav
移动到.leaflet-map-pane
MutationObserver
and observe changes to the attributes of .leaflet-map-pane
. MutationObserver
并观察对.leaflet-map-pane
属性的更改。 style
attribute of .leaflet-map-pane
changes, grab its style.transform
property and extract the x and y values. .leaflet-map-pane
的style
属性发生更改时,请抓取其style.transform
属性并提取x和y值。 Invert those values and apply them to #map-nav
. #map-nav
。 var map = L.map('map-content', { zoomControl: false }).setView([51.505, -0.09], 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18, id: 'rauschundrausch.cih3gisks00r8rlly0ob5s2me', accessToken: 'pk.eyJ1IjoicmF1c2NodW5kcmF1c2NoIiwiYSI6ImNpaTYyeW14MTAwNml2eW0zcmR6aHIzdDcifQ.6T8nzYq49rFnvcqk6lgYPg' }).addTo(map); var marker = L.marker([51.5, -0.09]).addTo(map); marker.bindPopup("this is a<br>large<br>popup<br>in<br>terms of height"); var mapNav = document.getElementById("map-nav"); var mapPane = document.querySelector(".leaflet-map-pane"); var rxTranslate = /translate(?:3d)?\\(([^\\)]+)\\)/i; mapPane.appendChild(mapNav); var observer = new MutationObserver(function(mutations) { if (mutations.some(m => m.attributeName === "style")) { // apply an inverse transform mapNav.style.transform = "translate(" + mapPane .style .transform .match(rxTranslate)[1] .split(",") .slice(0, 2) /* extract only x and y; discard z */ .map(n => parseFloat(n) * -1 + "px") /* invert values */ + ")"; } }); observer.observe(mapPane, { attributes: true });
#map { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } #map-nav { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; background-color: #ccc; z-index: 200; box-shadow: inset 0 0 0 1px #f00; } #map-content { width: 100%; height: 100%; } .leaflet-popup-pane { z-index: 3; }
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script> <div id="map"> <div id="map-content"> <div id="map-nav"></div> </div> </div>
This may lag on some clients while dragging. 在拖动时,这可能会滞后于某些客户端。 You could use a timeout to defer the update but that would mean the nav menu would move around until you stop dragging.
您可以使用超时来推迟更新,但这意味着导航菜单会移动直到您停止拖动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.