Z-Index not working: Position is set.
===

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

![Screenshot][1]


  [1]: http://i.stack.imgur.com/0j9i5.png

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:

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

