Logo above header image(slide show)

I am struggling with CSS. I have got a simple slide show and I want, that my logo is above of it.

Here is my html:

<div id="header">
        <div id="logo"></div>
        <div id="grafic">
            <img id="bild" src="">
        </div>
    </div>

and my CSS:

#header {
width: 100%;
height: 350px;
/*background-image: url(../pics/header.png);*/
}

#logo {
height: 320px;
background-image: url(../pics/jobber_logo.png);
background-repeat: no-repeat;
background-position:50px 45px;
float: left;
z-index: 10;    
}

#grafic {
z-index: 1;
}

#bild {
width: 100%;
height: 100%;
z-index: 5;
}

I am a bit confused!!