地图覆盖响应式导航栏

Question

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

/* NAVIGATION ANIMATION */
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>

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

响应式导航栏的剩余部分在那里，但它在地图后面。它应该是这样的。有什么方法可以把导航放在地图上吗？

Answer 1

您可以使用 z-index 属性将元素 - 您想要的元素添加到页面的特定层。例如，您可以将一个元素的属性设置为 2，将另一个元素的

设置为 4。

有关详细信息，请访问 https://www.w3schools.com/cssref/pr_pos_z-index.asp

希望我的回答对您有所帮助

地图覆盖响应式导航栏

Map overrides the responsive navigation bar

html

css

web-frontend

responsive