Z-Index无效：位置已设定

Question

我正在尝试在DOM中的所有内容之上添加标题。它并不喜欢它：

图片1 （左侧容器阴影开启）

图片2 （左侧容器阴影关闭，标题阴影开启）

“快速选择”上方的阴影应位于标题下方。换句话说，它不应该在那里！我已经尝试了几乎一切。我还没有尝试用索引设置每个部分和div。我的页脚实际上超越了所有内容，但我猜是因为它位于DOM的末尾。我也尝试将标题移到那里，但它没有用。我甚至尝试将它改成DIV并移动它。没什么......这是货物：

更新2012.20.07 12:56 am

好的，所以这真的很奇怪。事实证明，标题确实位于图像上的菜单上方。如果我关闭“快速选择”容器上的投影并向标题添加投影，则表明标题位于前面。见图2.我不确定它是否相关，但持有“快速选择”菜单的部分包含一个JQuery手风琴。

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);
}

Answer 1

付诸top 0

#mainSection #leftMenu{
top:0;
}

检查

现场演示http://tinkerbin.com/MPLvxOP0

Answer 2

希望this可能就是你想要的。如果没有那么回复