CSS Z-インデックスが絶対配置で機能しない

Question

私は次のような状況に陥っています： コード内にいくつかのdivコンテナがあります。

.outside { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.options { 
 
    position: absolute; 
 
    z-index: 999; 
 
}

<div class="outside"> 
 
    <div class="inside"> 
 
    <div class="options">Content</div> 
 
    </div> 
 
</div>

上記の3つのdivの選択は、数回繰り返されます。 私が今問題にしているのは、外側のdivがoptions divと重なるということです。私はこれをz-indexで設定しようとしましたが、動作しません。 誰にもこれに対する解決策がありますか？

Answer 1

移動position:relative;と.forum_arrow_outsideへ.forum_post_outsideからZインデックス、やはり.forum_arrow_outsideにfloat: right;を追加、.forum_arrow_outsideからposition: absolute;を削除：

.forum_post_outside { 
 
    border: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    min-height: 75px; 
 
    padding: 0 5px; 
 
    width: 100%; 
 
    background-color: #333; 
 
    margin-bottom: 2px; 
 
} 
 
.forum_arrow_outside { 
 
    position: relative; 
 
    z-index: 1; 
 
    float: right; 
 
    width: 150px; 
 
} 
 
.forum_arrow_top { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.forum_arrow_inside { 
 
    max-width: 110px; 
 
    -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5); 
 
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5); 
 
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5); 
 
    background-color: #eee; 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
    -moz-border-radius: 2px; 
 
    -webkit-border-radius: 2px; 
 
    -khtml-border-radius: 2px; 
 
    border-radius: 2px; 
 
    z-index: 999; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.forum_drop_down { 
 
    margin: 0!important; 
 
    margin-top: 10px!important; 
 
    line-height: 20px; 
 
    min-width: 110px; 
 
    border-bottom: 1px solid #ccc; 
 
    color: #000; 
 
    
 
}

<div class="forum_post_outside"> 
 
    <div class="forum_arrow_outside"> 
 
    <div class="forum_arrow_inside"> 
 
     <div class="forum_drop_down"> 
 
     <img src="/images/delete_16.png">Delete</div> 
 
     <div class="forum_drop_down"> 
 
     <img src="/images/unpin-16.png">Unpin</div> 
 
     <div class="forum_drop_down"> 
 
     <img src="/images/edit_16.png">Edit</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="forum_post_outside"> 
 

 
</div> 
 

 
<div class="forum_post_outside"> 
 

 
</div>