html - 我怎样才能将这个下拉列表绝对定位在溢出滚动父级中？

Question

我在父 div 中有一个下拉菜单，它具有固定的 height 并且上面有 overflow: auto。我希望我的菜单在打开时延伸到这个父项的边缘。目前，它增加了父级的高度。

参见 this reduced test case在 codepen 中，或此处的代码:

HTML

<div class="parent">
  <div class="dropdown">
    <button id="btn" class="btn" type="button">Click me</button>
    <div id="menu" class="menu">I should stick out of the parent, but instead I make the parent scroll</div>
  </div>
</div>

SCSS

.parent {
  height: 3rem;
  padding: 0.25rem;
  background-color: #f5f5f5;
  overflow: auto;
  text-align: center
}
.btn {
  font-size: 1.2rem;
}
.dropdown {
  display: inline-block;
  position: relative;
}
.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  border: 1px solid #eee;
  padding: 0.5rem;
  &.show {
    display: block;
  }
}

(JS 只是在下拉列表中切换 show 类，并不相关。)

我曾尝试将下拉菜单包装在另一个 div 中，并将几乎所有溢出值和人类已知的父级放在它上面——但没有成功。

我真的很想避免将我的菜单移到父级之外并用 JS 定位它；肯定有一个 CSS 解决方案(我希望!)

有人知道吗？

*已更新以添加我需要下拉菜单存在于正常文档流中，因为在我的实际应用程序中，父 div 中可能有许多这样的下拉菜单一个接一个。

Answer 1

这是一个你可以做的小技巧。不确定这样做是否正确，但它确实有效。

你必须记住的一件事是，如果你滚动，菜单不会移动所以你必须实现代码来监听文档上的滚动事件并隐藏菜单或相应地移动它。

document.getElementById('btn').onclick = function openMenu() {

  var btn = document.getElementById('btn');
  
  var top = btn.offsetTop;
  var left = btn.offsetLeft;
  var height = btn.offsetHeight;
  
  
  var menu = document.getElementById('menu');
  menu.style.top = top + height +'px';
  menu.style.left = left + 'px';
  
  menu.classList.toggle('show');
};

.parent {
  height: 3rem;
  padding: 0.25rem;
  background-color: #f5f5f5;
  overflow: auto;
}

.btn {
  font-size: 1.2rem;
}

.dropdown {
  display: inline-block;
}

.menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  max-width: 100px;
  background-color: white;
  border: 1px solid #eee;
  padding: 0.5rem;
}
.menu.show {
  display: block;
}

<div class="parent">
  <span>Button must remain in document flow to coexist with other elements in the parent.</span>
  <div class="dropdown">
    <button id="btn" class="btn" type="button">Click me</button>
    <div id="menu" class="menu">I should stick out of the parent, but instead I make the parent scroll.</div>
  </div>
</div>