jquery - 隐藏在另一个元素后面的html元素

Question

Fiddler演示html内容

https://jsfiddle.net/ASel1984/dd9gpnot/4/

fiddle 中的代码

这里我有 Bootstrap 按钮，点击后会显示下拉菜单。

当我单击我的按钮时，下拉菜单内容隐藏在标题 div 后面。如何显示下拉菜单项以显示在标题 div 上方？

注意:我只想在标题 div 上方显示下拉菜单项。

Answer 1

因此，您的下拉菜单的实际问题不是它隐藏在标题后面，而是它基于父 div 对齐。

              <div class="header-space">
                <br/><br/><br/>  
                <br/><br/><br/> 
              </div>
              <div class="btn-group dropup">
                <button class="btn btn-xs dropdown-toggle" aria-haspopup="true" aria-expanded="false" type="button" id="dropupMenu" data-toggle="dropdown">Add  Button<span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu" area-labelledby="dropupMenu">
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>                 
                  <li><a href="#">Link 3</a></li>  
                  <li><a href="#">Link 4</a></li>
                  <li><a href="#">Link 5</a></li>                 
                 </ul>
                </div>

您可以在此处看到，通过制作一个 div 包装标题空间，然后制作一个单独的 div 包装实际的弹出按钮，它将使弹出窗口与按钮的顶部对齐，因为它现在位于该 div 的顶部。现在，您可以根据自己的喜好设置其元素的宽度和高度，从而使您的文本在标题空间上按您希望的方式显示。希望对您有所帮助!

编辑:我看到您已经更新了代码，以便下拉菜单现在可以正确对齐，但我不太确定您要解决的最后一 block 是什么。我想你是说你希望下拉菜单位于放置表格的“div1”之上。如果这是正确的，可以通过将 overflow-y 设置为可见来完成，如下所示:

                .div2 {
                    overflow-y: visible;
                    height: calc(100vh - 50px);
                    border:2px solid red;
                }

如果我误解了你的目标，你可以用更具体的细节重述这个问题，我很乐意回顾它。