CSS下拉菜單沒有正確堆疊

我想用CSS做一個下拉菜單（js.fiddle：http://jsfiddle.net/Zbv6f/6/），我希望子drop元素出現在父元素下面，但它出現在它的上面。我已將drop元素的z-index設置爲較低的值，但不起作用。更令人困惑的是，我在上面顯示的父級中使用css創建了一個箭頭，並使用相同的z-index。CSS下拉菜單沒有正確堆疊

任何人都可以幫助我嗎？

來源

2012-08-02 user1490248

這是bcoz兩個子降元件和箭頭被包含在父內，並因此給予更高的z-index箭頭是將其置於具有較低的z-index下拉元件之上（因爲它們是兄弟姐妹），但給子drop元素的較低Z索引不起作用，因爲它包含在父元素中，並且您試圖將它放在它上面 – Uttara 2012-08-02 05:53:29

http://jsfiddle.net/Zbv6f/8/有幾個修復程序。看看能否幫助你。 – Chad 2012-08-02 05:56:25

也可以得到你要求的更好的解釋['here']（http://stackoverflow.com/questions/1806421/css-parent-element-to-appear-above-child） – Uttara 2012-08-02 06:14:57

我認爲你正在嘗試做這樣的事情在這個DEMO

HTML增加：

<div id="tab"> 
    <div class="reviewarrow-top"></div> 
    <div class="reviewarrow-bottom"></div> 
    Exam Reviews 
</div>

CSS修改/廣告揚長避短：

/* Modifications */ 
.review-announcement { 
    height:55px; 
    width: 165px; 
    border:2px #003577 solid;  
    text-align:right; 
    position: absolute; 
    right: 0px; 
    top: 150px; 
} 

/* Addition */ 
#tab { 
    position: relative; 
    z-index:5; 
    background: #fff; 
    height: 25px; 
    padding:15px 15px 15px 0; 
    color:#003577; 
    font-weight:bold; 
    font-size:18px; 
    right:0px; 
} 

/* Addition */ 
#tab:hover { 
    color: #003577; 
    background:#FAA301; 
} 

/* Addition - tab will remain active while container is visible. */ 
.review-announcement:hover > #tab { 
    color: #003577; 
    background:#FAA301; 
}

來源

2012-08-02 06:18:24

謝謝你做的伎倆 – user1490248 2012-08-02 06:34:43

不客氣。 – 2012-08-02 06:40:56

這裏工作的是我從你的問題得到了Demo，

希望這可以幫助你

來源

2012-08-02 06:09:25 Uttara

CSS下拉菜單沒有正確堆疊

回答

相關問題