如何将重叠的引导程序元素放置在传单地图上元素重叠在传单地图上

如何解决如何将重叠的引导程序元素放置在传单地图上元素重叠在传单地图上

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

现在，我需要放置3个组件（覆盖在传单地图上）（导航栏位于顶部，data -div位于右上方，data2位于左下方）。另外，这些都必须有所响应。

我已经尝试过，但是使用引导程序无法响应。

.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>

component.css

.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,#000000 74%);
  opacity: 0.6;
  overflow: auto;

}

我尝试了很多方法，但是重叠完成了，但对齐方式无法正常工作，响应能力也无法正常工作

我是这种情况的新手，任何人都可以帮助我