z-index不按预期工作 [英] z-index not working as intended

问题描述

我目前正在使用Leaflet和Mapbox来创建自定义地图。所有工作都很好，直到我开始研究弹出窗口。

我的情况：我有一个自定义的导航/控制面板可以使用，但它需要后面任何打开的弹出窗口（它目前不是）。

我准备了

我的部分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 set。

我读过否定的 z-index 可以解决这个问题，但由于我正在处理多个元素，所以我真的非常喜欢不那么黑客的解决方案 - 如果有的话。 （JavaScript解决方案也很受欢迎，因此也是标签）

正如我从代码检查中看到的，Leaflet将一些属性设置为 .leaflet-弹出窗口，它的位置是： transform：translate3d（..）， bottom 和剩下。

任何帮助表示感谢。

编辑：

我可以将＃map-nav 放入＃map-content ，但它仍然无效） ）：

1. 将＃map-nav 移动到中。 leaflet-map-pane


2. 创建一个 MutationObserver 并观察对 .leaflet-map-pane
   
3. 每当 .leaflet-map-pane 的样式 c>更改，获取它的 style.transform 属性并提取x和y值。反转这些值并将它们应用于＃map-nav 。此外，将 style.transition 属性复制到＃map-nav ，以便在平移动画期间它保持原位。 / li>


var map = setView（[51.505，-0.09]，13）; L.tileLayer（'https://api.tiles.mapbox.com/v4/ {id} / {z} /{x}/{y}.png?access_token={accessToken}'，{归因：'地图数据和复制;< a href =http://openstreetmap.org> OpenStreetMap< / a>贡献者，< 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'}）.a ddTo（map）; var marker = L.marker（[51.5，-0.09]）。addTo（map）; marker.bindPopup（这是一个< br>大< br> ）; 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））{//应用逆变换mapNav.style.transform =translate（+ mapPane .style .transform .match（rxTranslate）[1] .split（，）。 slice（0，2）/ *只提取x和y;丢弃z * / .map（n => parseFloat（n）* -1 +px）/ *倒数值* / +）; //在平移动画期间保持mapNav位置mapNav.style.transition = mapPane.style.transition; }}）; observer.observe（mapPane，{attributes：true}）;

  #map {position：fixed; top：0;正确：0;底部：0; left：0;}＃map-nav {position：absolute; left：10px;顶部：10px;宽度：100px; height：100px; background-color：#eee; z-index：200;}＃map-content {width：100％; height：100％;}。leaflet-popup-pane {z-index：3;}  

 < link rel =stylesheethref =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>  

在一些客户端拖动时。您可以使用超时来推迟更新，但这意味着导航菜单会移动，直到您停止拖动。


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. Additionally, copy the style.transition property to #map-nav so that it stays in place during panning animations.

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 */ + ")";
    // keep mapNav in place during panning animation
    mapNav.style.transition = mapPane.style.transition;
  }
});

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: #eee;
  z-index: 200;
}
#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.

这篇关于z-index不按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！