z-index not functioning properly

Question

z-index not functioning properly

Currently, I'm diving into the world of custom map creation using Leaflet and Mapbox. Everything was going smoothly until I encountered a challenge with the popups.

Here's the issue: I have a unique navigation/control panel that I want to display behind any open popups, but it's not working as intended.

To visualize the problem, I've set up a JSFiddle and included a screenshot:

https://i.sstatic.net/qsxYn.jpg

Here is a snippet of my CSS:

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

While inspecting the code in Firefox/Chrome, I noticed that the z-index is correctly set, and there are no conflicting z-index values in the .leaflet-popup element.

I've heard that using a negative z-index might fix this issue, but I'm looking for a more elegant solution that doesn't feel like a hack. JavaScript solutions are welcome as well.

Upon inspection, Leaflet applies attributes like transform: translate3d(..), bottom, and left to .leaflet-popup in terms of positioning.

Any assistance on this matter would be greatly appreciated.

Edit:

Even when I nest the #map-nav inside #map-content, the issue persists. Here's a fiddle illustrating this. However, when I attempt a similar setup without the map elements, it works.

javascript html css leaflet z-index

Answer 1

Answer №1

The issue arises from the fact that #map-nav is situated in a completely separate stacking context compared to the marker and its popup.

As it stands, the entirety of the map is positioned behind #map-nav. Therefore, adjusting the z-index on either #map-nav or the .leaflet-popup-pane will not provide a solution.

Disclaimer: Resorting to this method is not ideal. It is recommended to explore Leaflet's documentation and implement custom widgets instead of resorting to this workaround.

Nevertheless, I have devised a somewhat functional approach (results may vary):

Relocate #map-nav within .leaflet-map-pane
Set up a MutationObserver to monitor changes to the attributes of .leaflet-map-pane.
Whenever the style attribute of .leaflet-map-pane changes, extract the x and y values from its style.transform property, 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3cfc6c2c5cfc6d7e3928d908d92">[email protected]</a>/dist/leaflet.css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="412d2420272d243501706f726f70">[email protected]</a>/dist/leaflet.js"></script>
<div id="map">
  <div id="map-content">
    <div id="map-nav"></div>
  </div>
</div>

There might be performance issues on certain devices during dragging. Utilizing a timeout to delay the update could mitigate this, but it may cause the navigation menu to shift until dragging ceases.

Answer 2

The issue arises from the fact that #map-nav is situated in a completely separate stacking context compared to the marker and its popup.

As it stands, the entirety of the map is positioned behind #map-nav. Therefore, adjusting the z-index on either #map-nav or the .leaflet-popup-pane will not provide a solution.

Disclaimer: Resorting to this method is not ideal. It is recommended to explore Leaflet's documentation and implement custom widgets instead of resorting to this workaround.

Nevertheless, I have devised a somewhat functional approach (results may vary):

Relocate #map-nav within .leaflet-map-pane
Set up a MutationObserver to monitor changes to the attributes of .leaflet-map-pane.
Whenever the style attribute of .leaflet-map-pane changes, extract the x and y values from its style.transform property, 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3cfc6c2c5cfc6d7e3928d908d92">[email protected]</a>/dist/leaflet.css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="412d2420272d243501706f726f70">[email protected]</a>/dist/leaflet.js"></script>
<div id="map">
  <div id="map-content">
    <div id="map-nav"></div>
  </div>
</div>

There might be performance issues on certain devices during dragging. Utilizing a timeout to delay the update could mitigate this, but it may cause the navigation menu to shift until dragging ceases.

z-index not functioning properly

Answer №1

Similar questions

Implementing a delay between two div elements using jQuery

Eliminate missing values from geospatial dataset

Button click not triggering Ajax functionality

Changing the size of an image in an HTML5 canvas

Interface key error caused by the TypeScript template literal

Utilizing React, manipulating the DOM by utilizing getElementById, and then attempting to swap out a node with a React Component

Comparing the syntax of JSON to the switch statement in JavaScript

Deliver varied asset routes depending on express js

JavaScript influences CSS in EasySlider 1.7, creating a harmonious relationship between the

What is the best way to modify the selection text background with CSS?

Inserting duplicate rows from CSV using JavaScript

Tips for hiding the bottom bar within a stackNavigator in react-navigation

Could one potentially generate new static files in Nextjs without needing to rebuild the entire app?

What drawbacks come with developing an Express.js application using TypeScript?

Having difficulty aligning the container div in the center

search for the compose function in the material table within a react component

Having trouble constructing the Grand-Stack-Starter api because babel-node is not being recognized

Text positioned beneath a toggle switch in html that overlaps

Database-driven cron scheduling

Creating Static Content using Spring Framework