我有以下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 <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
之外,还有什么方法可以将其显示在列表的其余部分之上吗? (我不希望它高于页面中的所有内容,就在其余父元素的元素之上。
答案 0 :(得分:0)
使用z-index
属性,下拉列表值越高,另一个div需要关闭的z-index越小。
答案 1 :(得分:0)
尝试为z-index:999
课程提供nav
。这对我有用。
答案 2 :(得分:0)
最后我想起了原因:
父元素有overflow-y: hidden
将其设置为初始/可见,并显示下拉列表。