停止div与尺寸增加重叠的另一个重叠

Question

我的engagement-filtercontainer div过去一直位于我的engagement-graphcontainer的正上方，除非通过单击按钮将其展开，在这种情况下，它会下降到graphcontainer重叠的地方。现在，由于有更多的内容，engagement-filtercontainer的大小有所增加，它与包含我的svg的图形容器重叠。我需要它动态地不执行此操作，即使我的过滤器尺寸增加了也是如此。

我有一些按此顺序包含的div：

<div class="Engagement-Container">
<div class="Engagement-Body">

<div class="Engagement-Graph" id="graph">
  <div class="Engagement-FilterContainer" 
   </div>
   <div class="Engagement-GraphContainer" 
   <svg
      class="Engagement-GraphSVG"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1 ">
    </svg>
  </div>
</div>

</div>
</div>

请注意，engagement-filtercontainer和graphcontainer都在engagement-graph div中，并且我的svg包含在graphcontainer中。

在下面的图像中，您可以看到现在具有更多内容的过滤器扩展到该区域（我用CSS隐藏了，这就是为什么我在开发模式下显示它的原因，我尝试了各种方法来解决此问题，但我认为我需要最终的解决方案。

CSS：

参与度图（父级div）

.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;

@include tablet() {
  width: 65%;
}
}

参与图容器（包含我要防止不必要的重叠的svg图）

  .Engagement-GraphContainer {
  position: relative;
  width: 100%;
  height: calc(100% - 56px);
  top: 0;
  background-color: $gray-bg-color;
  transition: height $filter-slide-duration, top $filter-slide-duration;

  @include tablet() {
    background-color: white;
    height: 100%;
  }

  svg {
    width: 100%;
    height: 100%;
  }

  &--WithFilter {
    height: calc(100% - 480px) !important;
    top: 480px !important;

    @include landscape {
      height: calc(100% - 436px) !important;
      top: 436px !important;
    }
  }
}

过滤容器（重叠）

.Engagement-FilterContainer {
  overflow: overlay;
  display: table;
  position: absolute;
  width: 100%;
  z-index: 10;
  transition: transform $filter-slide-duration;
  transform: translateY(-486px);
  visibility: hidden;
  &--Visible {
    transform: translateY(0) !important;
  }

  @include landscape {
    transform: translateY(-436px);
  }
}

我希望过滤器能够像往常一样工作，所以当它展开时会显示在屏幕上，但是当过滤器不展开时，无论它有多大，我都不希望它侵蚀图形。当滤镜较小时，它永远不会出现在屏幕上，因此它的大小不得动态变化。

谢谢您的帮助。