CSS Z-Index не работает над абсолютным позиционированием

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>

Отборочные три дивы выше повторяются несколько раз. Проблема, которую я сейчас имею в том, что внешний div будет перекрывать опции div. Я попытался установить это с помощью z-index, но он не работает. У кого-нибудь есть решение?

Answer 1

Move position:relative; и г-индекс от .forum_post_outside к .forum_arrow_outside, а также удалить position: absolute; из .forum_arrow_outside, также добавил float: right; в .forum_arrow_outside:

.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>