CSS Z-Index funktioniert nicht bei absoluter Positionierung

Question

Ich habe die folgende Situation: Es gibt mehrere div-Container in meinem Code.

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

Die Auswahl der drei divs oben wird mehrmals wiederholt. Das Problem, das ich jetzt habe, ist, dass das äußere div die Optionen div überlappen wird. Ich habe versucht, dies mit dem Z-Index einzurichten, aber es funktioniert nicht. Hat jemand eine Lösung dafür?

Answer 1

Verschieben position:relative; und die z-index von .forum_post_outside zu .forum_arrow_outside, entfernen Sie auch position: absolute; von .forum_arrow_outside, auch float: right; zu .forum_arrow_outside hinzugefügt:

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