Z-index 未按预期定位 [重复]答案

【问题标题】：Z-index is not positionning as expected [duplicate]Z-index 未按预期定位 [重复]
【发布时间】：2021-01-07 11:51:58
【问题描述】：

$(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>

我有一张使用传单显示在背景上的地图。我有一个位于地图顶部的 div。在 div 中，我有另一个 div，其中包含图像和文本。

我的问题是 category_img div 没有位于第一类的顶部。

我添加了一个代码片段来查看它的行为方式。感谢您的帮助

【问题讨论】：

能不能加个fiddle让我们很好理解
.category 和 .category_img 位于两个独立的堆叠上下文中。当您在父级上设置 999 时，将子级设置为任何 z-index 都不会导致其堆叠在父级之上。
@Terry 我该如何解决这个问题？
@zakariamouqcit 你必须修改你的 html 以便 .category_img 不是 .category 的孩子
@Terry 你的评论是矛盾的。孩子当然可以比他们的父母处于更高的 z-indices，但是如果他们的父母是 positioned 并创建他们的父母，他们就会陷入父母的 堆叠上下文自己的堆叠上下文。所以.category 和.category_img 在这方面处于相同的堆栈上下文中，即使.category_img 创建了自己的嵌套堆栈上下文within .category。与you can see 一样，具有“中间”z-index 值的另一个元素仍将出现在先前上下文中具有更高 z-index 值的子元素上方。

标签： html css

【解决方案1】：

据我了解，您希望所有标记都位于任何层之上，对吗？您可以在 id 为 #mapid 的 div 上应用 z-index，并为其添加 position: relative

【讨论】：