A div falls behind another one despite stacked it up to front

Hey guys,

I've another issue. I've done this a 100th times already but this time it simply doesn't work. My brain has been blank I haven't touch anything HTML for at least 6 months.

Look at the picture and look at my code. Can you point out what's wrong with it.
HTML:

<header><div class=wrapper>
    <h1>
        <a href='index.php'>My Awesome Website</a>
    </h1>
    <ul class=nav>
        <li>
            <a href="#"><img id=search src="images/search.svg" /></a>
            <div id=searchbox>
                <form method=post action="#">
                    <input type=text name=search />
                    <input type=submit class=search_button value='search' />
                </form>
            </div>
        </li>
        <li><a href="#"><img id=login src="images/enter.svg" /></a></li>
    </ul>
</div></header> <!-- wrapper & header -->

<section><div class=wrapper>

</div></section> <!-- wrapper & section -->

Code (markup):

CSS:

.wrapper {
    overflow: hidden;
    max-width: 100%;
    padding: 0 0.6em;
    margin: 0 auto;
}

h1 {
    float: left;
    padding: 0.2em 1.5em 0.3em 0;
    font: bold helvetica, sans-serif;
}
h1 a {
    text-decoration: none;
    color: #FFF;
}

.nav {
    float: right;
    text-align: right;
    padding-top: 0.6em;
}
.nav li { display: inline; margin-left: 0.3em; }
.nav li:first-child { margin-left: 0; position: relative; }
#searchbox {
    position: absolute;
    z-index: 9;
    top: 1.5em;
    right: 0;
    background: red;
    padding: 0.6em;
    box-shadow: 0 0 0.2em #888;
}

section {
    position: relative;
    background: #FFF;
}

Code (markup):

I would hide the modal box and call it with the onclick event in JavaScript. But first things first I've to make it worked with CSS.

It should stack up over the <section>.

Thanks,

 

Well, the wrapper has overflow: hidden; which is the culprit.