jquery - 下拉菜单被后面的元素隐藏

Question

我有一个下拉菜单，它似乎被 DOM 中的下一个文件夹隐藏了。

 div class="dropdown-tracks" >


   <div class="btn-group">
      <a class="btn btn-primary" href="#"><i class="icon-filter"></i> Filter </a>
       <a class="btn btn-primary" data-toggle="dropdown" href="#">
         <span class="icon-caret-down"></span> </a>                                    

            <ul class="dropdown-menu">
               <li><a href="#">Latest tracks (first 25)</a></li>
               <li><a href="#"> Most liked tracks </a></li>                                  
            </ul>
         </div>
        </div> 

 <div class="container" id="facebook-vids" style="background-color:#fdfcfc"> 
<!--content-->
</div>

CSS:

.dropdown-menu {
position: relative;
z-index: 100;
}

展开菜单时，#facebook-vids div 会覆盖下拉菜单的内容。正如 stackoverflow 上的其他答案所建议的那样，我已经更改了位置和 z-index，但无济于事。

提前致谢!

Answer 1

您需要确保.dropdown-tracks 的z-index 高于.container。例如

.dropdown-tracks {
  position: relative;
  z-index: 100;
}

.container {
  position: relative;
  z-index: 50;
}