Question

我目前遇到的问题是，Leaflets 映射 API 当前显示在我的下拉菜单前面，覆盖并隐藏它，但是，目前并没有阻止用户使用下拉菜单和地图。

当前页面HTML 和当前CSS（仅适用于地图空间、下拉列表和地图下方的列）

body #mapspce{
  height: 500px;
  width: 100%;
  background-color:#444444;
  border: 4px solid black;
  padding 10px;
  text-align: center;   
}
/*dropdown menu*/

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .but {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown .but:hover{
  color:#0080ff;
  font-weight:bold;
  background-color:#737373;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.titlelink a {
  color:#0080ff;
  text-decoration:none;
  text-transform: uppercase;
  font:18px;
}

.btmtxtsect{
  text-align: center;
  /*border: 3px solid green;*/
}

/*columns and rows for GIS explinations*/

.column {
  float: left;
  width: 50%;
  height: 250px;
}
.row:after {
  content:"";
  display: table;
  clear:both;
}



/*Footer*/
footer{
  color:#ffffff;
  padding:20px;
  background-color:#119108;
  border-top:#000 3px solid;
  text-align:center;
}

footer.gis{
  background-color:#444444;
}

<!DOCTYPE html>

<html lang="eng">

<!--Meta data and title of the page-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="Author" content="Tom Slater 18018815 USW">
  <link rel="stylesheet" type="text/css" href="../tut.css">
  <title>GIS Tutorials</title>
  <script src="leaflet/leaflet.js"></script>
  <link rel="stylesheet" href="leaflet/leaflet.css"/>
</head>

<body>


<!--nav bar-->

<header>
<!--contains the information within the header allowing for borders and text manipulation-->
<div class = "container">
<!--Displays the title whilst highlighting it-->
<div id = "title">
<h1><span class = "highlightlink">GIS TUTORIALS</span></h1>
</div>

<!--Nav Bar-->
<div class="dropdown">
<!--Assignment One GIS CW pt 1 (google maps & Bing)-->
<button class="but">Assignment 1<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<!-- LINK for Marker Page-->
<a href="../mapicon.htm">Markers Task</a>
<!--LINK for Lines Tutorials-->
<a href="../maplines.html">Polylines Task</a>
<!--LINK for Polygons Task-->
<a href="../polygons.html">Polygons Task</a>
<!--LINK for info windows-->
<a href="../infowind.html">Info Windows Task</a>
<!--LINK for KLM Maps Features-->
<a href="../klm.html">KLM Features</a>
<!--LINK for Bing-->
<a href="../bing.html">Bing</a>
</div>
</div>


<div class="dropdown">
<!--Assignment Two GIS CW pt 2 (leaflet & Open Layers)-->
<button class="but">Assignment 2</button>
<div class="dropdown-content">
<!--Link for Leaflet-->
<a href="">Leaflet</a>
<!--Link for Open Layers-->
<a href="openlayer.htm">Open Layers</a>
</div>
</div>

<div class="dropdown">
<!--Assignment Three GIS CW pt 3 (Server side poo)-->
<button class="but">Assignment 3</button>
<div class="dropdown-content">
<!--Link for...-->
<a href="">Serverside 1</a>
<!--Link for ...-->
<a href="">Serverside 2</a>
</div>
</div>




</div>
</header>
<!--map space-->
<div id="mapspce">

<!--MAP SCRIPT-->
<script>
<!--Instantiating the map-->
  var Leafmap = L.map('mapspce', {
  center: [51.5, -3.4],
  zoom: 9
  });

<!--Adding the tile-->
L.tileLayer('https://tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=2392bb5236f942d8897fbe6d6c2d0c66',{
  maxZoom: 19,
  transparent: true,
  attribution: 'Tom Slater 18018815 &copy;, <a href="https://www.thunderforest.com/maps/transport/">Thunderforest</a> &copy;'
  }).addTo(Leafmap);

</script>

</div>


<!--Testx section explaining the map-->
<div class="btmtxtsect">
<div class="row">

<div class="column" style="Background-color:#bbb">
<h3>About this map</h3>
<p>The theme of this map is transport. The map shows rail lines and their stations, tramlines and roads from all over the world.
<br>
<br>
The map features data about ... from ...
</p>
</div>

<div class="column" style="background-color:#ccc">
<h3>Features Of this map</h3>
<ul>
<li>Markers</li>
<li>Polylines</li>
<li>GEO SPATIAL DATA</li>
<li>ETC</li>
</ul>
</div>

</div>

</div>




</body>
<footer class ="gis">
Tom Slater 18018815 &copy;
</footer>

</html>

Answer 1

已解决： Z 索引-

地图本身是重叠的，并且 API 中肯定有一个隐藏的 Z 索引，这覆盖了它上面的大部分内容。

将 .Dropdown-content 类更改为更高的 Z 索引 20，下拉菜单能够再次显示在地图上。

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20;
}

然而，这导致了无法点击地图及其各种按钮的问题。在修复此问题时，.mapspce 类还提供了一个定义的 Z-index，其值低于下拉列表的值 1 和父 .dropdown 类的 z-index 为 999，以确保它仍然在前面地图。

.dropdown {
  float: left;
  overflow: hidden;
    z-index:999;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20;
}

body #mapspce{
    height: 500px;
    width: 100%;
    background-color:#444444;
    border: 4px solid black;
    padding 10px;
    text-align: center;
    z-index:1;  
}

设置 Z-index 有助于您将 HTML 部分分层，从而允许某些区域出现在其他区域之前。这在与 API 交互时也很重要，因为不一定会提供此信息并且可能需要玩弄。

Leaflet API 覆盖下拉菜单

1 个答案: