css - 在另一个 div 上方显示未知大小的 div

Question

我正在尝试将下拉菜单作为页脚。当菜单接收到悬停事件时，它应该将元素容器放在它自己的顶部，但由于元素容器的大小可以是动态的，因此需要正确放置。

   <div class="wrapper">
       <div id="div1" class="div1">ITEM CONTAINER</div>
       <div id="div2" class="div2">MENU</div>
   </div>

这是我得到的壁橱:https://jsfiddle.net/Y4kga/61/

但问题是当我改变 div1 的高度时，菜单也会下降。我需要菜单留在我指定的位置(margin-top:100px)。有什么建议我如何在没有 jquery 的情况下完成此操作？谢谢!

Answer 1

你可以在这里尝试类似的东西:

http://codepen.io/petethewizard/pen/ByqYQM

它的代码如下，html:

<div id="wrapper">
  <div id="above">
      Test text. Test text. Test text. Test text. Test text.
      Test text. Test text. Test text. Test text. Test text.
  </div>

  <div id="below"></div>
</div>

SASS/CSS:

#wrapper {
  margin-top: 400px;
  position: relative;
  width: 120px;
  height: 50px;
  overflow: visible;

  #above {
      position: absolute;
      bottom: 100%;
      left: 0;
      width: 300px;
      background:skyblue;
  }

  #below {
    width: 120px;
    height: 50px;
    background:green;
  }
}

您可以将#above 元素的高度设置为任何值或将其保留为自动。