地图覆盖响应式导航栏答案

【问题标题】：Map overrides the responsive navigation bar地图覆盖响应式导航栏
【发布时间】：2020-05-23 19:04:49
【问题描述】：

我正在尝试在网站上创建一个带有响应式导航栏的地图。这是我的导航栏和地图的 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>

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

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

【问题讨论】：

标签： html css responsive web-frontend

【解决方案1】：

你可以使用z-index属性来取元素——你想要的元素到页面的特定层。例如，您可以将一个元素的此属性设置为 2，而将另一个元素的此属性设置为 4。

欲了解更多信息，请访问https://www.w3schools.com/cssref/pr_pos_z-index.asp

希望我的回答对你有帮助

【讨论】：