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

Question

我试图通过单击一个元素将子菜单显示在前面。子菜单（蓝色）应该覆盖下面的导航菜单（黄色），但它没有。

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

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

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

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

Answer 1

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

#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;
}