問題描述
我目前正在使用 Leaflet 和 Mapbox 創建自定義地圖.在我開始處理彈出窗口之前，一切都運行良好.
我的情況:我有一個將要使用的自定義導航/控制面板，但它需要在任何打開的彈出窗口之后(目前不是).
我準備了一個
我的 CSS 的一部分是
#map-nav {位置:絕對；左:10px；頂部:10px；z指數:2；}.leaflet-popup-窗格，.leaflet-popup {z-index:1000！重要；}默認傳單類的 z-index 為 7(我認為)，我只是將其重寫為 100% 確定.在瀏覽器(FF/Chrome)中檢查代碼時，我看到 z-index 設置正確，并且 .leaflet-popup 中的其他元素沒有任何 z-index 設置.
我已經讀到否定的 z-index 可以解決這個問題，但是當我使用多個元素時，我真的很喜歡一個不那么hacky"的解決方案——如果有的話.(也歡迎使用 JavaScript 解決方案，因此使用標簽)
從代碼檢查中我可以看到，Leaflet 為 .leaflet-popup 設置了一些屬性，這些屬性在位置方面是:transform: translate3d(..)，bottom 和 left.
感謝任何幫助.
我可以把 #map-nav 放在 #map-content 里面，但還是不行):
- 將
#map-nav移動到.leaflet-map-pane - 創建一個
MutationObserver并觀察.leaflet-map-pane的屬性變化. - 每當
.leaflet-map-pane的style屬性發生變化時，抓取它的style.transform屬性并提取 x 和 y 值.反轉這些值并將它們應用到#map-nav.
var map = L.map('map-content', {縮放控制:假}).setView([51.505, -0.09], 13);L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {attribution: '地圖數據和副本;<a >OpenStreetMap</a>貢獻者，<a >CC-BY-SA</a>，圖像 ? <a rauschundrausch.cih3gisks00r8rlly0ob5s2me',訪問令牌:'pk.eyJ1IjoicmF1c2NodW5kcmF1c2NoIiwiYSI6ImNpaTYyeW14MTAwNml2eW0zcmR6aHIzdDcifQ.6T8nzYq49rFnvcqk6lgYPg'}).addTo(地圖);var marker = L.marker([51.5, -0.09]).addTo(map);marker.bindPopup("這是一個<br>大<br>popup<br>在<br>高度方面");var mapNav = document.getElementById("map-nav");var mapPane = document.querySelector(".leaflet-map-pane");var rxTranslate =/translate(?:3d)?(([^)]+))/i;mapPane.appendChild(mapNav);var觀察者=新MutationObserver(函數(突變){if (mutations.some(m => m.attributeName === "style")) {//應用逆變換mapNav.style.transform = "翻譯(" + mapPane.風格.轉變.match(rxTranslate)[1].分裂("，").slice(0, 2)/* 只提取 x 和 y；丟棄 z */.map(n => parseFloat(n) * -1 + "px")/* 反轉值 */+ ")";}});觀察者.觀察(mapPane，{屬性:真});#map {位置:固定；頂部:0；右:0；底部:0；左:0；}#地圖導航{位置:絕對；左:10px；頂部:10px；寬度:100px；高度:100px；背景顏色:#ccc；z 指數:200；盒子陰影:插圖 0 0 0 1px #f00;}#地圖內容{寬度:100%；高度:100%；}.傳單彈出窗格{z指數:3；}<link rel="stylesheet" /><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="地圖"><div id="地圖內容"><div id="map-nav"></div></div></div>這可能會在拖動時在某些客戶端上滯后.您可以使用超時來推遲更新，但這意味著導航菜單會四處移動，直到您停止拖動.
I am currently working with Leaflet and Mapbox to create a custom map. 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
Part of my CSS is
#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. 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.
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. (JavaScript solutions are welcome as well, hence the tag)
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.
Any help is appreciated.
Edit:
I can put the #map-nav inside #map-content and it still won't work fiddle. 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.
The way you have it set up right now, the entire map is behind #map-nav. So, changing the z-index on either #map-nav or the .leaflet-popup-pane won't really help.
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):
- Move
#map-navinto.leaflet-map-pane - Create a
MutationObserverand observe changes to the attributes of.leaflet-map-pane. - Whenever the
styleattribute of.leaflet-map-panechanges, grab itsstyle.transformproperty and extract the x and y values. Invert those values and apply them to#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 >OpenStreetMap</a> contributors, <a >CC-BY-SA</a>, Imagery ? <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" />
<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.
這篇關于z-index 未按預期工作的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！