ブートストラップのドロップダウンメニューは、部分的に

Question

はここでドロップダウンを作成するためのHTMLでテーブルセルによって隠さ：

<div class="btn-group pull-right elipsis-margin open"> 
<button type="button" class="btn btn-link btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-validation-status="ok"> 
    <i class="fa fa-ellipsis-v fa-lg"></i> 
</button> 
<ul class="dropdown-menu"> 
    <li><a href="#shareModal" data-toggle="modal" class="btn-action"><i class="fa fa-share fa-fw"></i>Share</a></li> 
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i>Edit</a></li> 

    <li role="separator" class="divider"></li> 
    <li><a href="#unshareModal" data-toggle="modal" class="btn-action"><i class="fa fa-ban fa-fw"></i>Unshare</a></li> 
</ul> 

このdiv要素は、テーブル本体の内側の内側に位置しています。明らかに、ドロップダウンは表のセルによって覆い隠されていますが、そのz位置は1000に設定されています。正しく表示されているようです。

ご協力いただければ幸いです。

Answer 1

z-indexは、positionプロパティがabsolute、fixed、またはrelativeに明示的に設定されている要素に対してのみ機能します。

ドロップダウンの位置を上記のいずれかに設定してみてください。あなたはまた、テーブルのためにこれを行う必要があります。

例：

.your-class { 
    position: relative; 
}