ドロップダウンメニューは、それに続く要素によって隠されています

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がドロップダウンメニューのconetentsと重なります。 stackoverflow上の他の答えで示唆されているように、私は位置とZ-インデックスを変更しましたが、無駄です。

ありがとうございます！

Answer 1

z-indexが.dropdown-tracksであることを.containerよりも高くする必要があります。例えば。

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

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