z-index无法按预期工作

Question

我目前正在使用Leaflet和Mapbox来创建自定义地图.一直都很好,直到我开始研究弹出窗口.

我的情况:我有一个将使用的自定义导航/控制面板,但它需要在任何打开的弹出窗口后面(它目前不是).

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

我的部分CSS是

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

默认的传单类有z-index7个(我想),我只是把它写成100%肯定.当检查在浏览器的代码(FF /铬),我看到的z索引被正确设置,并在没有其他元件.leaflet-popup具有任何z-index集合.

我已经读到负面z-index可以解决这个问题,但是当我使用多个元素时,我真的非常喜欢一个不那么"hacky"的解决方案 - 如果有的话.(欢迎JavaScript解决方案,因此标签)

我可以从代码检查看到,宣传单设置一些属性.leaflet-popup,其位置而言是:transform: translate3d(..),bottom和left.

任何帮助表示赞赏.

编辑:

我可以放在#map-nav里面#map-content,它仍然不会工作小提琴.然而,当我试图模仿这个而不是地图的东西,它确实有效.

Answer 1

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

你现在的设置方式,整个地图都落后了#map-nav.因此,改变z-index上的任何一个#map-nav或者.leaflet-popup-pane不会真正有用.

免责声明:这是一个可怕的,可怕的黑客攻击.如果你看看宣传册的文档,并找到一种方法来添加自己的小部件,我会强烈建议做的是不是这个.

也就是说,我有一些工作(你的里程可能会有所不同):

1. 移动#map-nav到.leaflet-map-pane
2. 创建MutationObserver并观察对属性的更改.leaflet-map-pane.
3. 每当更改style属性时.leaflet-map-pane,抓取其style.transform属性并提取x和y值.反转这些值并将其应用于#map-nav.此外,复制#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 &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>

在拖动时,这可能会滞后于某些客户端.您可以使用超时来推迟更新,但这意味着导航菜单会移动直到您停止拖动.