DOM のすべての上にヘッダーを配置しようとしています。それはそれを愛していません：
画像 1 (左のコンテナーの影がオン)
画像 2 (左コンテナーの影がオフ、ヘッダーの影がオン)
「クイック ピック」の上のドロップシャドウは、ヘッダーの下にある必要があります。つまり、あってはならない!! 私はほとんどすべてを試しました。私はまだすべてのセクションと div をインデックスで設定しようとはしていません。私のフッターは実際にはすべての上に上がっていますが、DOM の最後にあるので推測しています。ヘッダーも下に移動しようとしましたが、うまくいきませんでした。DIVに変更して移動してみました。何もありません...商品は次のとおりです。
更新 2012.20.07 午前 12:56
わかりました、これは本当に奇妙です。ヘッダーが実際に画像のメニューの上にあることがわかります。「クイック ピック」コンテナのドロップ シャドウをオフにしてヘッダーにドロップ シャドウを追加すると、ヘッダーが前面に表示されます。画像 2 を参照してください。関連性があるかどうかはわかりませんが、「クイック ピック」メニューを含むセクションには JQuery アコーディオンがあります。
HTML
<header id="mainHeader">
<h3>Angiograph: Head & 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);
}