div上的CSS- div-不能在所有地方使用背景div

Question

我对CSS不太自信，我只想使用传单地图，并在其顶部添加过滤器卡。

这张卡位于地图顶部，这很棒，但是由于某些原因，我无法在后台使用地图（缩放/取消缩放，选择点...）

代码很简单；这是HTML：

<div class="container-map">
  <div class="map-background">
    <lfmap></lfmap>
  </div>
  <div class="map-filter">
    <racesfilter class="animated fadeIn"></racesfilter>
  </div>
</div>

和CSS：

.container-map {
  position: relative;
}

.map-background,
.map-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.map-background {
  z-index: 10;
}

.map-filter {
  z-index: 100;
  padding-left: 10%;
  padding-top: 5%;
}

racesfilter也非常简单：

<div class="card-criterias" style="width: 30rem;">
  <div>
    CONTENT
  </div>
</div>

.card-criterias {
  background-color: #fff;
  padding: 25px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}