Twitter bootstrap 如何在传单地图上放置重叠的引导元素（元素覆盖在传单地图上。）

我已经创建了一个角度应用程序，因为我已经创建了传单地图

现在我需要放置3个组件（导航栏在顶部，数据-div放在右上方，数据2放在左下方），它们覆盖在传单地图上。此外，所有这些都必须响应

我已经尝试过了，但是使用引导时响应性不起作用

.component.html

<nav class="navbar navbar-expand-sm navbar-custom "  >
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
      aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" >
      <span class="navbar-toggler-icon"></span>
    </button>

<!-- some navbar links-->

</nav>

<div id="map" class="container-fluid d-sm-none d-md-block d-lg-block d-xl-block" style="height: 135vh" >

  <div class="row">
    <div class="col-xs-12 col-sm-8 col-lg-12 mapContainer">
      
<div class="overlay2" >
    <div class="col-xs-12 col-sm-10 col-lg-12" id="res">

      <ul class="nav nav-tabs border-0" style="border: none;">
        <li class="nav-item ">
          <a href="#" class="nav-link border border-default border-bottom-0 active" data-toggle="tab"
            id="tabstyle" style=" font-size: 20px; color: red; font-weight: 500;">
            data-1</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link border border-default border-bottom-0" data-toggle="tab" id="tabstyle"
            style=" font-size: 20px; color:  red;font-weight: 500;">data-2</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link border border-default border-bottom-0" data-toggle="tab" id="tabstyle"
            style=" font-size: 20px; color:  red;font-weight: 500;">data-3</a>
        </li>
      </ul>
     
      <div class="tab-content">

        <div class="tab-pane fade show active" id="xx">

          <ul class="list-group card" id="dd">
<li>
//some data
</li>
            
          </ul>

        </div>

        <div class="tab-pane fade" id="yy">

          <ul class="list-group card" id="dd">
            <li class="list-group-item">
             //some data
          </li>
          </ul>

        </div>

        <div class="tab-pane fade " id="zz">

          <ul class="list-group card" id="dd">
            <li class="list-group-item" >
             
                 //some data
            </li>
          </ul>

        </div>

</div>
    </div>
    </div>

<div class="row">
    <div class="overlay">
      <div class="col-xs-12 col-sm-8 col-lg-11" >
        <h5 style="color: white;">Output Stream</h5>
       
        <span *ngIf="imageurl != ''">
          <img src="{{imageurl}}" class="img-responsive" width="325" height="275" id="outputstream" />
        </span>
       
</div>

  </div>
</div>
  </div>
</div>
</div>

我已经尝试了很多方法，但是重叠已经完成，但是对齐不正常，响应也不正常

我不熟悉这种情况，有人能帮我吗

.mapContainer{
  width: 100vw;
  height: 100vh;
  padding: 0 ;
}
.overlay {
  position: absolute;
  width: 800px;
  left: 0;
  bottom: 0;
 background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
opacity: 0.8;
  z-index: 1000;
  top: 550px;
  height: 325px;
}

.overlay2 {
  position: absolute;
  width: 525px;
  height: 425px;
top: 0;
margin-top: 55px;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
  opacity: 0.6;
  overflow: auto;

}