z-index與相對塊上的絕對塊不起作用

Question

我試圖通過單擊元素調出子菜單。子菜單（藍色）應該覆蓋下面的導航菜單（黃色），但不是。

下面是用破碎行爲演示：http://jsfiddle.net/rqeRC/1/

sub menu == #profileMenu 
navigation menu == #navigation 

子菜單是用z-index 3的絕對定位塊，而導航菜單是用z-index 2.隱而不宣的相對定位塊」 t似乎以這種方式工作。

注意：由於在背景中已經有固定元素，我確實需要z-index來將這些元素保留在前景中。

Answer 1

只是要在#profile的z指數比#navigation高。例如。

#profile { 
    float: right; 
    margin: 60px 47px 0px 0px; 
    position: relative; 
    z-index: 20; 
} 

Answer 2

navigation和#profileMenu具有相同的z-index，即2，將profileMenu的z-index設置爲更高的值。

小提琴：http://jsfiddle.net/rqeRC/2/

#profile { 
    float: right; 
    margin: 60px 47px 0px 0px; 
    position: relative; 
    z-index: 3; 
} 
#navigation { 
    float: right; 
    margin: 60px 47px 0px 0px; 
    min-height: 248px; 
    position: relative; 
    width: 248px; 
    z-index: 2; 
}