divの上にメニュードロップダウンを表示するには

Question

私はいくつかのCSSの問題に直面しています。私は名前を変更、削除、または削除するメニューをポップアップするメニュー項目を持っていますが、CSSには含まれていますが、メニューにあるdivの下に表示されます。私は上にそれをしたい。また、私はブートストラップCSSを使用しています。

スニペット：

.form-group { 
 
    margin-bottom: 15px; 
 
} 
 
.pagesmenu { 
 
    position: relative; 
 
    background-color: #d3edff; 
 
    border-radius: 7px; 
 
    border: 1px solid #cde; 
 
    box-sizing: border-box; 
 
    color: #2b5672; 
 
    height: 39px; 
 
    line-height: 39px; 
 
    padding-left: 12px; 
 
    width: 200px; 
 
} 
 
.pagesmenu.selected { 
 
    background-color: #d3edff; 
 
} 
 
.portlet-body.form { 
 
    background: #f0f3f5; 
 
    padding: 10px; 
 
} 
 
.pageoption { 
 
    float: right; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 
.dropdownpageopt { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 100px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdownpageopt a { 
 
    color: black; 
 
    padding: 2px 6px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
    z-index: 9999; 
 
} 
 
.dropdownpageopt a:hover { 
 
    background-color: #f1f1f1 
 
} 
 
.pageoption:hover .dropdownpageopt { 
 
    display: block; 
 
}

<div class="form-body ui-sortable" id="nitspopupmenu"> 
 

 
    <div class="form-group ui-sortable-handle" id="div-1"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Home<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-2"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> About Us<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-3"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Services<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-4"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Our Team<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-5"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Portfolio<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-6"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Clients<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-7"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Blog<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
    <div class="form-group ui-sortable-handle" id="div-8"> 
 
    <div class="pagesmenu"><span><i class="fa fa-bars"></i> Contact<div class="pageoption"><a href="#" class="pageoptions"><img src="../nits-img/global/editor/portlet-config-icon.png"></a><div class="dropdownpageopt"><a href="#">Rename</a><a href="#">Hide</a><a href="#">Delete</a></div></div></span> 
 
    </div> 
 
    </div> 
 
</div>

私を助けてください。ありがとう

Answer 1

ドロップダウンメニューに高いz-インデックスを適用すると、このトリックが実行されます。

.dropdownpageopt { 
    z-index:1; // can make this higher if required. eg, 99 
} 

Answer 2

.pagesmenu { 
    position: inline-block; 
    background-color: #d3edff; 
    border-radius: 7px; 
    border: 1px solid #cde; 
    box-sizing: border-box; 
    color: #2b5672; 
    height: 39px; 
    line-height: 39px; 
    padding-left: 12px; 
    width: 200px; 
} 

Answer 3

、それはこのように、上にすることができ内側に、あなたはそれ内の各リンク上の全体.dropdownpageoptクラスinsteanにZ-インデックスを使用するので、全体のホワイトボックス、残りすることができます

.dropdownpageopt { 
    display: none; 
    position: absolute; /*<-- this is needed to make z-index work*/ 
    background-color: #f9f9f9; 
    min-width: 100px; 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
    margin-top: -30px; 

    z-index: 99; /*<---this*/ 


    } 

：

.dropdownpageopt { 
    z-index: 99; 
} 

あなたは.dropdownpageoptクラス、例が含まれているセクションで、あなたのCSSコードにZインデックスを追加することができますあるいは、このセクションで：

.pageoption:hover .dropdownpageopt { 
    display: block; 
    z-index: 99; /*<---this*/ 
} 

あなたのケースでは問題がある、Z-indexが唯一posiotioned要素（すなわち：絶対/相対/固定）で動作し、あなたがdropdownpageopt内のリンクに入れdid'ntた（それは説明：Here.）。たとえあなたがしてZインデックスが動作していても、内部のリンクでのみ機能し、白いボックスは上には残りません。そのため、z-indexをdropdownpageoptクラス全体に配置する必要があります。

と値は必要ありません.99または9999である必要があります.1を.dropdownpageoptで試してみました。

- このヘルプが必要です。