CSS Z-Index不能用於絕對定位

我有以下情況：我的代碼中有幾個div容器。CSS Z-Index不能用於絕對定位

.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設置它，但它不起作用。有沒有人有這個解決方案？

來源

2016-12-20 Dennis

您可以創建一個小提琴？我認爲如果我們有一些能夠發揮作用的東西，我們將能夠很快爲您提供幫助。 – oompahlumpa

移動position:relative;和.forum_arrow_outside的z指數從.forum_post_outside，也從.forum_arrow_outside刪除position: absolute;，還增加了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>

來源

2016-12-20 17:44:29 Ionut

謝謝你的回覆。我嘗試過，但它仍然無法正常工作。 – Dennis

@丹尼斯，你想要做什麼？當你運行代碼片段時，你會發現它的工作原理。因此，請更好地描述您的實際問題，或者使用完整的代碼製作http://jsfiddle.net以複製問題，以便我可以幫助您。 – Ionut

這裏是我創建的小提琴：https://jsfiddle.net/5y4owxt8/ – Dennis

CSS Z-Index不能用於絕對定位

回答

相關問題