html - 容器中固定和相对 div 的 z-index 问题

Question

我遇到了 z-index 的问题，我的布局草稿表格在这里：jsfiddle

我正在努力实现以下目标

1. , #topBar,需要始终固定。（已实现#Navigations）#infobar

2. 的 Z 索引#mainMenu。需要介于#contentBorder和#content（有阴影）之间。

3. 的 Z 索引#categorys。需要在#contentBorderaand的顶部#content。

任何帮助将不胜感激。

Answer 1

见www.w3schools.com

定义和使用

z-index 属性指定元素的堆栈顺序。

具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。

注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。

Answer 2

这里的解决方案是给#sideBar一个比给#contentBorder div更高的索引，那么#sideBar的所有子元素都可以与#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/