将Bootstrap Dropdown带到前面

Question

我有以下dom树：

<ul class="nav">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3 That Has a List</li>
    <ul>
         <li class="sidebar-search">
              <div class="input-group custom-search-form">
                   <input type="text" class="form-control" ng-model="searchText" placeholder="Αναζήτηση...">
                   <span class="input-group-btn">
                        <div class="dropdown">
                            <a id="toolsDrop" href="" role="button" class="dropdown-toggle btn btn-primary" data-toggle="dropdown" style="padding: 6px 6px 6px 8px;">Filters&nbsp;&nbsp;&nbsp;<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" style="min-width: 0; top: 34px; left: -20px;">
                                    <li>Filter1</li>
                                    <li>Filter2</li>
                                    <li>Filter3</li>
                                    <li>Filter4</li>
                            </ul>
                        </div>
                   </span>
              </div>
         </li>
         <li>
              <ul class="nav nav-second-level sidebar-device-list">Another list that gets filtered by the dropdown and thus, changes size
              </ul>
         </li>
    </ul>
    <li>Item4</li>
    <li>Item5</li>
</ul>

正如你在这些图片中看到的那样：

，因为如果具有下拉按钮的列表元素太小，<div class="dropdown">位于列表中的div下，其他列表项将呈现在下拉菜单上方。我已经尝试将下拉菜单的z-index设置为99999但是它不起作用，因为z-indexes如何工作（假设元素具有不同的父元素，它们处于不同的堆叠顺序/范围{{3} }）。

除了将下拉菜单的位置设置为fixed之外，还有什么方法可以将其显示在列表的其余部分之上吗？ （我不希望它高于页面中的所有内容，就在其余父元素的元素之上。

Answer 1

使用z-index属性，下拉列表值越高，另一个div需要关闭的z-index越小。

Answer 2

尝试为z-index:999课程提供nav。这对我有用。

Answer 3

最后我想起了原因：

父元素有overflow-y: hidden

将其设置为初始/可见，并显示下拉列表。