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

只需使#profile上的z-index高于#navigation上的z-index。 E.g。

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