地图会覆盖响应式导航栏

我正在尝试创建一个网站上具有响应式导航栏的地图。这是我的导航栏和地图的CSS代码:

/* NAVIGATION ANNIMATION */
nav {
    width: 93%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    background-color: #1d2d35;
    border-radius: 8px;

    /* starting point */
    opacity: .3;
    -webkit-transform: translate3d(5%,0,0)scale(.97);
    -moz-transform: translate3d(5%,0,0)scale(.97);
    transform: translate3d(5%,0,0)scale(.97);
}

/*Nav Expanding Open Effect*/
nav.open {
    opacity: 1;

    -webkit-transform: translate3d(0,0,0)scale(1);
    -webkit-animation: slideIn .35s ease-in-out;

    -moz-transform: translate3d(0,0,0)scale(1);
    -moz-animation: slideIn .35s ease-in-out;

    transform: translate3d(0,0,0)scale(1);
    animation: slideIn .35s ease-in-out;
}
        #map {
          position:relative;
          height:100%;
          margin-top: 0;
      }

      @media only screen and (min-width: 375px) and (max-width: 812px) {
        #map {
          margin-top: 60px;
        }

这是HTML代码

<div class="container">

      <header class="slide">
          <ul id="navToggle" class="burger slide">
              <li></li><li></li><li></li>
          </ul>
          <h1><a href="MainPage.html">HackAMap</a></h1>
      </header>

      <nav class="slide close">
          <ul>
              <li><a href="MainPage.html">Home</a></li>
              <li><a href="ReportPage.html">Report Status</a></li>
              <li><a href="Map.html">Track Me</a></li>
              <li><a href='map3.html'>Location Check</a></li>
              <li><a href="login.html" onclick="SignOut()">Sign Out</a></li>
          </ul>
      </nav>
      </div>
      <div id="map"></div>

这是切换到响应式时导航栏的图像。

enter image description here

The remaining part of responsive navigation bar is there but it is behind the map. Here is what it should look like. enter image description here Is there any ways I can put the navigation on top of the map?

评论
  • SOS
    SOS 回复

    You can use z-index property to take element - elements you want to a specific layer of the page. For example, you can set this property for an element to 2, and set it for another element to 4.

    For more info, visit https://www.w3schools.com/cssref/pr_pos_z-index.asp

    希望我能帮到你