将Bootstrap Dropdown带到前面

时间:2015-12-07 09:59:28

标签: css twitter-bootstrap twitter-bootstrap-3 z-index

我有以下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>

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

Dropdown Example Dropdown not in foreground

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

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

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

最后我想起了原因:

父元素有overflow-y: hidden

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