Html 谷歌地图绝对定位重叠固定位置导航栏

当谷歌地图在移动站点上不断重叠固定位置导航栏时，为小企业和我的一生开发一个角度应用程序是无法解决的。当我向下滚动时，地图与导航栏重叠，这不是我想要的。我希望它消失在它后面。我尝试在这两个元素上设置z索引，但都不起作用

以下是

location.component.html

<div class="md-6-col" >
    <div #gmap style="width: 100%;height: 450px;"></div>
</div>

<nav class='navbar'>
    <div class='navbar__logo'></div>
    <ul class='navbar__list'>
        <li class='navbar__item'>
            <a class='navbar__link' routerLink='/home' routerLinkActive='navbar__link--active'>
                <i class='navbar__icon navbar__icon--home'></i>
                <p class='navbar__linktext'>Home</p>
            </a>
        </li>
        <li class='navbar__item'>
            <a class='navbar__link' routerLink='/location' routerLinkActive='navbar__link--active'>                
                <i class="navbar__icon navbar__icon--location"></i>
                <p class='navbar__linktext'>Location</p>
            </a>
        </li>
        <li class='navbar__item'>
            <a class='navbar__link' routerLink='/contact' routerLinkActive='navbar__link--active'>                
                <i class="navbar__icon navbar__icon--location"></i>
                <p class='navbar__linktext'>Contact</p>
            </a>
        </li>
    </ul>
</nav>

以下是

navbar.component.css的css

.navbar {
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #4F4F4F;
  }
/*
  .navbar__logo {
    display: inline-block;
    background-image: url('/assets/mobile_logo_150x150.png');
    height: 150px;
    width: 150px;
  }
  */
.navbar__list {
  height: 100%;
  margin: 0;
  padding: 0;
}

.navbar__item {
  align-items: center;
  display: inline-flex;
  height: 100%;
  vertical-align: middle;
  width: 33%;
}

.navbar__link {
  color: #ffffff;
  height: 100%;
  text-decoration-line: none;
  width: 100%;
}

.navbar__link--active {
  font-weight: 900;
  background-color: #363636;
}

.navbar__icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display:block;
  height: 30px;
  width: 100%;
}

.navbar__icon--home {
  background-image: url('/assets/home-icon.png');
}

.navbar__icon--location {
  background-image: url('/assets/location-icon.png');
}

.navbar__linktext {
  margin: 0;
}

@media screen and (min-width: 480px) {
  .navbar {
    text-align: right;
  }
}

---

您在哪里为地图应用位置：绝对？

---

确保将position:absolute属性应用于map，并将position:relative应用于map的父对象，以使z索引正常工作。

当我添加#gmap时，它会自动设置它。我认为这与谷歌处理MapsJS组件的方式有关。如果我转到“Chrome开发者元素”选项卡，position属性将显示为absolute。在地图周围应用父div并设置父div position:relative，看到了吗？