html元素隐藏在另一个元素后面答案

【问题标题】：html element hiding behind another elementhtml元素隐藏在另一个元素后面
【发布时间】：2015-11-24 00:06:24
【问题描述】：

Fiddler 演示html内容

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

code in the fiddle

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

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

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

【问题讨论】：

标签： jquery twitter-bootstrap css twitter-bootstrap-3

【解决方案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 的顶部。现在，您可以根据自己的喜好设置其元素的宽度和高度，从而使您的文本在该页眉空间中显示为您想要的。希望对您有所帮助！

编辑：我看到您已经更新了代码，以便下拉菜单现在正确对齐，并且不太确定您要解决的最后一个问题是什么。我认为您是说您希望下拉菜单位于放置桌子的“div1”顶部。如果这是正确的，可以通过将溢出-y 设置为可见来完成，如下所示：

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

如果我误解了您的目标，您可以详细说明问题，我很乐意回顾一下。

【讨论】：

我刚刚更新了我原来的 jsfiddle。演示实际问题
刚刚编辑了我的答案以帮助实现我认为您的目标。

【解决方案2】：

只需将您的 UL“下拉菜单拉右”元素 position:relative 像这样：
<ul class="dropdown-menu pull-right" style="position:relative" role="menu">

https://jsfiddle.net/dd9gpnot/1/

【讨论】：

这是我做不到的。实际上，当底部没有空间可显示时，在调整大小窗口上我正在设置菜单的下拉类。感谢您的建议。