Z-index is not positionning as expected

Question

$(function() {
    var headerHeight = $("#header").height();
    var footerHeight = $("#navfooter").height();
    var windowHeight = $("html").height();
    var remainHeight = windowHeight-headerHeight-footerHeight;
    $("#mapid").css({"height":remainHeight});


    var mymap = L.map('mapid').setView([30.8864928,-5.4257845 ], 5);

    L.tileLayer('https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1IjoiemFraWdhdGVzIiwiYSI6ImNrZmNkNXJ1djFlaGsydHBwYzRjOXBqbHIifQ.nFOZC7iLO3gaGkhiFajGAQ', {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
        maxZoom: 18,
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

    var maroc = data
    var region = new L.GeoJSON(maroc)
    region.addTo(mymap)
    
  });

html, body {
    width: 100%;
    height: 100%;
}
#titreCarte {
    font-family: 'Raleway', sans-serif;
}

#footer {
    font-family: 'Raleway', sans-serif;   
}

.category{
    height: 65%;
    width: 7%;
    z-index: 999;
    position: absolute;
    flex: 1;
    background-color: white;
    left :1%;
    top: 18%;
    border-radius: 10px ;
    opacity: 0.5;
}

.category_img {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="crossorigin=""/>
    <link rel="stylesheet" href="index.css">
    <title>La carte interactive | GIZ</title>
</head>
<body>
    <nav class="navbar navbar-light bg-light" id="header">
        <a class="navbar-brand" href="#">
          <img src="logo_ministere_en1.png" width="50" height="40" class="d-inline-block align-top" alt="" loading="lazy">
        <img src="logo_ministere_enText.png" width="100" height="40" class="d-inline-block align-top" alt="" loading="lazy">
        
        <span id="titreCarte"> | Carte de diversité biologique du Maroc</span>  
        </a>
      </nav>


      <div id="mapid">
        <div class="category">
          <div class="col-12 category_img">
            <img src="sibe_marker.png" alt="" width="100" height="100">
            <p class="text_category"></p>
          </div>
          <div class="col-12"></div>
          <div class="col-12"></div>
          <div class="col-12"></div>
        </div>
      </div>






    
      <nav id="navfooter" class="navbar fixed-bottom navbar-light bg-light" style="display: flex; justify-content: center; align-items: center;">
        <a id="footer" class="navbar-brand" href="#">2020 © Tous droits réservés</a>
      </nav>









    
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="index.js"></script>
    <script src="data.js"></script>
</body>
</html>

I have a map displayed on the background using a leaflet. I have a div positioned on top of the map. inside the div, I have another div that contains an image and text.

my problem is the category_img div is not positioned on top of the category one.

I added a code snipet to see how it behaves. Your help is appreciated

can you please add a fiddle so that we can understand it very well — Mehedi Hasan Siam, Sep 21 '20 at 11:29
`.category` and `.category_img` are in two separate stacking contexts. When you set 999 on the parent, setting the child to whatever z-index will not cause it to stack above the parent. — Terry, Sep 21 '20 at 11:32
@zakariamouqcit you have to rework your html so that .category_img is not a child of .category — Stanley, Sep 21 '20 at 13:27
@Terry Your comment is contradictory. Children can of course be at higher *z-indices* than their parents, but they are stuck in the *stacking context* of their parents if their parents are `position`ed and create their own stacking context. So `.category` & `.category_img` are in the same stacking context in that regard, even though `.category_img` creates its own nested stacking context *within* `.category`. As [you can see](https://jsfiddle.net/un24zr6j/1/), another element with an "in-between" z-index value will still appear above children w/ higher z-index values in a prior context. — TylerH, Sep 21 '20 at 14:20
@zakariamouqcit You have `.category` as having `flex: 1` but it does not appear to be a flex item unless there are additional styles you have not included. — TylerH, Sep 21 '20 at 14:20
@TylerH I don't see how it is: of course, it is up to OP to read up exactly what stacking context is and how they are created. Just pointing OP in the right direction. — Terry, Sep 21 '20 at 14:21
@Terry Your first sentence is arguably incorrect (`.category_img` *creates* its own (sub) stacking context, but it is still entirely trapped within the stacking context of `.category`), and then your second sentence is correct, but it contradicts your first. — TylerH, Sep 21 '20 at 14:24
I mistook the html properties. I resolved it by setting all the divs to position:relative then applied the z-index only to the first child of mapid and it worked. Thanks for your tipes guys helped alot. — zakaria mouqcit, Sep 21 '20 at 14:51

score 0 · Answer 1 · answered Sep 21 '20 at 14:00

0

From what I understand, you want all markers to be above any layer, right? You can apply the z-index over the div with id #mapid, and add a position: relative to it

answered Sep 21 '20 at 14:00

bpardo

401
5
11

Z-index is not positionning as expected

1 Answers1