z-index 未按预期工作

2022-01-12 00:00:00 leaflet javascript html css z-index

我目前正在使用 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 里面，但还是不行):

  1. 将 #map-nav 移动到 .leaflet-map-pane
  2. 创建一个 MutationObserver 并观察 .leaflet-map-pane 的属性变化.
  3. 每当 .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 href="http://openstreetmap.org">OpenStreetMap</a>贡献者，<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>，图像 © <a href="http://mapbox.com">Mapbox</a>',最大缩放:18，id: '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" 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="地图"><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):

  1. Move #map-nav into .leaflet-map-pane
  2. Create a MutationObserver and observe changes to the attributes of .leaflet-map-pane.
  3. Whenever the style attribute of .leaflet-map-pane changes, grab its style.transform property 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 &copy; <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.

相关文章