溢出內的絕對定位元素：自動父級

Question

我們有一個具有max-height屬性的div。 由於我們希望內容是可滾動的，因此在該div中有overflow:auto 。

但是，現在我們需要在內容中包含一個引導程序下拉菜單，並且當下拉菜單被激活時，菜單將在容器div中呈現，但不會從菜單中彈出。 我們該如何解決？

這是情況的復制： https : //jsfiddle.net/broncha/h1pa0tex/

Answer 1

快速的答案是您不能！ （如果您使用overflow:auto那么container內的所有內容都是可滾動的。）

1. 如果您沒有overflow它會起作用：

     .container{ width: 200px; background: lightblue; padding: 15px; } .dropdown{ border: 1px solid #000; position: relative; } .popup{ position: absolute; top: 100%; left:0; background: red; } 

     <div class="container"> <p>asasd asdasdas dasdasda</p> <p>asasd asdasdas dasdasda</p> <div class="dropdown"> <p>Content</p> <div class="popup"> <p>asasd asdasdas dasdasda</p> <p>asasd asdasdas dasdasda</p> <p>asasd asdasdas dasdasda</p> </div> </div> </div> 

2. 如果您確實想要自己的目標，那么就必須進行position: fixed並使用js來調整滾動：

     $(document).ready(function() { $('div.dropdown').each(function() { var dropDownTop = $(this).offset().top - $(window).scrollTop() + this.getBoundingClientRect().height; $(this).find('.popup').css('top', dropDownTop + "px"); $(this).find('.popup').css('left', $(this).offset().left - 0.5 + "px"); $(this).find('.popup').css('width', this.getBoundingClientRect().width - 1 + "px"); }); }); $('div.container').scroll(function() { $('div.dropdown').each(function() { var dropDownTop = $(this).offset().top - $(window).scrollTop() + this.getBoundingClientRect().height; $(this).find('.popup').css('top', dropDownTop + "px"); $(this).find('.popup').css('left', $(this).offset().left - 0.5 + "px"); $(this).find('.popup').css('width', this.getBoundingClientRect().width - 1 + "px"); }); }); 

     body { margin: 0; padding: 0; } * { box-sizing: border-box; } .container { width: 200px; max-height: 200px; overflow: auto; background: lightblue; padding: 15px; } .dropdown { border: 1px solid #000; position: relative; } .popup { position: fixed; background: red; } 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <p>asasd asdasdas dasdasda</p> <p>asasd asdasdas dasdasda</p> <div class="dropdown"> <p>Content</p> <div class="popup"> <p>asasd asdasdas dasdasda</p> <p>asasd asdasdas dasdasda</p> <p>asasd asdasdas dasdasda</p> </div> </div> <p>asasd asdasdas bnvnbv jgjg khg nbvnbvn nbvn bv</p> <p>asasd asdasdas nbv mgv mbnv mnbv nbv</p> <p>asasd asdasdas kuyg k kjhb kjhb</p> <p>asasd asdasdas jkhg kjhg jhb khg</p> <p>asasd asdasdas kjhg jhg hjgyg</p> <p>asasd asdasdas hkjh jbjhb mv mhv</p> </div> 

讓我知道您對此的反饋。 謝謝！

Answer 2

我不確定您要尋找的是什么，但是在固定位置的情況下，您可以“突破”主容器。

的HTML

<div class="container">
  <p>asasd asdasdas dasdasda</p>
  <p>asasd asdasdas dasdasda</p>
  <div class="dropdown">
    <p>Content</p>
    <div class="popup">
      <p>asasd asdasdas dasdasda</p>
      <p>asasd asdasdas dasdasda</p>
      <p>asasd asdasdas dasdasda</p>
    </div>
  </div>
<p>asasd asdasdas bnvnbv jgjg khg nbvnbvn nbvn bv</p>
  <p>asasd asdasdas nbv mgv mbnv mnbv nbv</p>
  <p>asasd asdasdas kuyg k kjhb kjhb</p>
  <p>asasd asdasdas jkhg kjhg jhb khg </p>
  <p>asasd asdasdas kjhg jhg hjgyg </p>
  <p>asasd asdasdas hkjh jbjhb mv mhv</p>
</div>

的CSS

.container{
  width: 200px;
  max-height: 200px;
  overflow: auto;
  background: lightblue;
  padding: 15px;
}

.dropdown{
  border: 1px solid #000;
  position: relative;
}

.popup{
  position: fixed;
  background: red;
  z-index: 10;
  width: 184px;
}

Codepen鏈接

Answer 3

我不知道如何解決您的具體問題，但我知道bootstrap有一個dropup類，可以在按鈕下方顯示內容，而不是在按鈕下方。 如果這沒有破壞您的設計安全性，那么這是一個簡單的解決方案XD