z-index 未按预期工作

Question

我目前正在使用 Leaflet 和 Mapbox 创建自定义地图。在我开始处理弹出窗口之前，一切都运行良好。

我的情况：我有一个将要使用的自定义 navigation/control 面板，但它需要在任何打开的弹出窗口之后（目前不是）。

我准备了一张JSFiddle和这张截图

我的部分 CSS 是

#map-nav {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
}
.leaflet-popup-pane, .leaflet-popup {
  z-index: 1000 !important;
}

默认传单类有 z-index 个 7（我认为），我只是将其覆盖以确保 100%。在浏览器 (FF/Chrome) 中检查代码时，我发现 z-index 设置正确并且 .leaflet-popup 中的其他元素没有任何 z-index 设置。

我读到负面 z-index 可能会解决这个问题，但由于我正在处理多个元素，所以我真的很想要一个 less "hacky" 解决方案 - 如果有的话。（JavaScript 也欢迎解决方案，因此标签）

正如我从代码检查中看到的那样，Leaflet 将一些属性设置为 .leaflet-popup，就位置而言，它们是：transform: translate3d(..)、bottom 和 left。

感谢任何帮助。

编辑：

我可以把 #map-nav 放在 #map-content 里，但还是不行 fiddle. However, when I try to imitate this without alle the map stuff, it does work.

Answer 1

问题是 #map-nav 存在于与标记及其弹出窗口完全不同的堆叠上下文中。

按照你现在的设置方式，整个地图都在 #map-nav 后面。因此，更改 #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.

也就是说，我有一些作品 (your mileage may vary):

将#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', {
  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>

这在某些客户端上可能会在拖动时出现延迟。您可以使用超时来延迟更新，但这意味着导航菜单会四处移动，直到您停止拖动。

z-index 未按预期工作

z-index not working as intended

html

javascript

css

z-index

leaflet