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將與選項div重疊。 我嘗試使用z-index進行設置，但無法正常工作。 有人對此有解決方案嗎？

Answer 1

移動position:relative; 以及從.forum_post_outside到.forum_arrow_outside的z索引，也刪除了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>