css - 将 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 的工作方式(假设元素有不同的父元素，它们处于不同的堆叠顺序/范围 as shown in this article ) .

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

Answer 1

最后我想起了原因:

父元素有overflow-y: hidden

将其设置为 initial/visible，然后将显示下拉列表。