容器中固定和相对div的z索引问题

Question

I am facing an issue with z-index my layout draft form is here : jsfiddle

I am trying to achieve the following

1. The #topBar , #Navigations , #infobar needs to be fixed always.(achieved)

2. Z-index of the #mainMenu . Needs to be between #contentBorder and #content (has a shadow).

3. Z-index of the #categorys . Needs to be top of the #contentBordera and #content .

any help will be highly appreciated.

Answer 1

Seen on www.w3schools.com

Definition and Usage

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Answer 2

The solution here is give to the #sideBar a higher index than to the #contentBorder div, then all sub elements of #sideBar can overlap those within the #contentBorder:

#topBar {
    z-index:2000;
}
#sideBar {
    z-index: 1900;
}
#mainMenu {
    z-index:1500;
}
#categorys {
    z-index:1800;
}
#contentBorder {
    z-index:1400;
}
#content {
    z-index:1600;
}

http://jsfiddle.net/6hRdF/13/