CSS Z-Index不适用于绝对定位

Question

I have the following situation: There are several div containers in my 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> 

The Selection of three divs above is repeated several times. The problem i have now is that the outside div will overlap the options div. I tried to set this up with the z-index but it is not working. Does anyone have a solution for this?

Answer 1

Move position:relative; and the z-index from .forum_post_outside to .forum_arrow_outside , also remove position: absolute; from .forum_arrow_outside , also added float: right; to .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>