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元素的高度设置为任何值，或者只是将其保留为自动。

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

1 个答案: