Z-Index not working: Position is set

Question

I am trying to bring a header above everything in the DOM. It's not lovin' it:

Image 1 (with left container shadow on)

Image 2 (with left container shadow off and header shadow on)

The dropshadow above 'Quick Pick' should be below the header. In other words, it shouldn't be there!! I have tried almost everything. I still haven't tried to set every single section and div with an index. My footer is actually rising above everything, but I am guessing because it's at the end of the DOM. I tried moving my header down there too, but it didn't work. I even tried changing it to a DIV and moving it. Nothing... Here's the goods:

UPDATE 2012.20.07 12:56 am

Ok, so this is really weird. It turns out that the header is indeed above the menu on the image. If I turn off the drop shadow on the "Quick Pick" container and add a drop shadow to the header it shows that the header is in front. See Image 2. I am not sure if it is relevant but the section holding the "Quick Pick" menu houses a 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);
}

Answer 1

Hope this might be what you want. if not then reply

Answer 2

give to top 0

#mainSection #leftMenu{
top:0;
}

Check to this

live demo http://tinkerbin.com/MPLvxOP0