使用JQuery定位相同类的元素和变量top

Question

我希望“.bottom-container”元素的顶部位置等于“.top-content”顶部位置，加上“.top”高度。问题是top和hight值每次都会改变，包含这些元素的div“.container”会重复相同的类，我之前有一个很好的答案来解决元素.each（）的高度但需要添加顶部

我放了一个“level-1”，“level-2”等类来改变红盒子容器的顶部位置。

我该怎么做：.bottom-container top（绿色框）= .top-content top（带有关卡类的红色框容器）+ .top height（红色框）。

这是代码示例：

$(document).ready(function() {
  var topContainer = $(".container .top-content .top");
  var botContainer = $(".container .column .bottom-container");
  tl = topContainer.length;
  bl = botContainer.length;

  topContainer.each(function(topIndex) {
    var _self = $(this);
    var topHeight = _self.height();


    botContainer.each(function(botIndex) {

      if (botIndex >= (bl) * (topIndex / (tl)) && botIndex < (bl) * (topIndex + 1 / (tl))) {

        var bc = $(this);
        bc.css({
          "top": topHeight + "px",
        });
      }
    });

  });

});

.container {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.top-content {
  position: absolute;
  width: 100%;
  z-index: 100;
}

.level-1 {
  top: 10px;
}

.level-2 {
  top: 20px;
}

.level-3 {
  top: 30px;
}

.top {
  position: absolute;
  background-color: red;
}

.column {
  display: inline-block;
  height: 200px;
  width: 60px;
  background-color: gray;
}

.bottom-container {
 position : relative;
 background-color: green;
}

.bottom-content {
  width: 50px;
  height: 50px;
  background-color: black;
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div class="top-content level-1">
    <div>other thing</div>
    <div class="top">
      Height change with dynamically content.
    </div>
  </div>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 1
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 2
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 3
      </div>
      <div>other thing</div>
    </div>
  </section>

</div>

<div class="container">

  <div class="top-content level-2">
    <div>other thing</div>
    <div class="top">
      Height change with dynamically content, is always different size.
    </div>
  </div>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 1
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 2
      </div>
      <div>other thing</div>
    </div>
  </section>

</div>


<div class="container">

  <div class="top-content level-3">
    <div>other thing</div>
    <div class="top">
      Height change with dynamically content, is always different size.is always different size.is always different size.
    </div>
  </div>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 1
      </div>
      <div>other thing</div>
    </div>
  </section>

  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 2
      </div>
      <div>other thing</div>
    </div>
  </section>
  
  <section class="column">
    <div class="bottom-container">
      <div class="bottom-content">
        BOTTOM CONTENT 2
      </div>
      <div>other thing</div>
    </div>
  </section>

</div>