Z指数不工作：位置设置

我想在DOM中的任何东西上面带头。它不喜欢它：Z指数不工作：位置设置

图像1 （与左容器阴影）

enter image description here

图像2 （左容器阴影和关闭头阴影）

'Quick Pick'上方的阴影应该在标题下方。换句话说，它不应该在那里！我已经尝试差不多的一切。我仍然没有试图用索引设置每一个部分和div。我的页脚实际上超越了一切，但我猜测是因为它在DOM的末尾。我也尝试将标题移到那里，但它不起作用。我甚至尝试将它改为DIV并移动它。没什么......这里的商品：

UPDATE 2012.20.07上午12时56

好了，所以这是非常奇怪的。事实证明，标题确实在图像上的菜单上方。如果关闭“Quick Pick”容器上的投影并向投影头添加阴影，则会显示标题在前面。见图2.我不确定它是否相关，但持有“快速选择”菜单的部分包含JQuery Accordion。

HTML

<header id="mainHeader"> 
<h3>Angiograph: Head &amp; Neck</h3> 
<p><i>Ag-01 through Ag-14</i></p> 
</header> 
<section id="mainSection"> 
    <img id="theImage" src="images/mods/angiograph/head/Ag1.jpg" title="Ag-01" alt="Ag-01"> 
<div id="leftMenu"> 
    <div id="addHolder"> 
<!-- Quick Pick Section --> 
     <h3 class="topHeader"><a href="#">Quick Pick</a></h3> 
     <div id="quickPick"> 
      <ul id="thumbList"> 
      </ul> 
     </div> 

.......

CSS

#mainHeader{ 
position: absolute; 
left: 0; 
top: 0; 
height: 10%; 
width: 100%; 
z-index: 3; 

-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75); 
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75); 
box-shadow: 0px 0px 15px rgba(0, 0, 0, .75); 
} 

#mainSection{ 
position: absolute; 
left: 0; 
top: 10%; 
height: 85%; 
width: 100%; 
background-color: #464040; 
z-index: 1; 
} 

#mainSection #leftMenu { 
position: absolute; 
width: 15%; 
height: 100%; 
left:0; 
background-color: #141111; 
z-index: 2; 

-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75); 
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, .75); 
box-shadow: 0px 0px 15px rgba(0, 0, 0, .75); 
}

来源

2012-07-20 atomSmasher