css - z-index 不适用于相对块上的绝对块

Question

我试图通过单击一个元素来将一个子菜单放在前面。子菜单（蓝色）应该覆盖下面的导航菜单（黄色），但事实并非如此。

这是一个破坏行为的演示：http: //jsfiddle.net/rqeRC/1/

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

子菜单是 z-index 3 的绝对定位块，而导航菜单是 z-index 2 的相对定位块。似乎不能以这种方式工作。

注意：由于背景中已经有固定元素，我确实需要 z-index 将这些元素保留在前台。

Answer 1

导航和#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;
}

Answer 2

只需使 z-index on#profile高于 on #navigation。例如

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