Fixed div over absolute?

Question

I want to create similiar page to this. Especially I am interesed in that image with a flag. I tried to make something similiar to that and this is what I already managed to do: Fiddle.

Html:

<div id="logo"> <a href="#"><img src="http://s20.postimg.org/9sr84gnw9/logo.png" alt="logo"></img></a> 
    <ul id="navbar">
        <li><a href="Marsrutai.html">Maršrutai</a>

        </li>
        <li><a href="Nuotraukos.html">Nuotraukos</a> 
        </li>
        <li><a href="Apie mane.html">Apie mane</a> 
        </li>
        <li><a href="Dviraciai.html">Dviračiai</a> 
        </li>
        <li><a href="Kontaktai.html">Kontaktai</a> 
        </li>
    </ul>
    <div id="header">
         <h1>MARŠRUTAI</h1>

    </div>
    <div id="content"></div>

CSS:

body {
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
    background-color: #282828;
    background-size: 16px 16px;
}

#header {
    background-image:url(http://s20.postimg.org/gcpvgfth8/header.jpg);
    position: fixed;
    width: 100%;
    height:150px;
    text-align:center;
    text-top:50%;
    color: white;
    top:70px;
    left:0;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    padding: 50px 0;
}

#content {
    width:100%;
    height:100%;
    position: absolute;
    top:351px;
/*bacground gradients: http://lea.verou.me/css3patterns/# */
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
    background-color: #282828;
    background-size: 16px 16px;

    left:0;
    bottom:0;
}

#logo {
    position:fixed;
}

ul {
    text-shadow: 0px 2px #444;
    font-size: 20px;
    padding: 0;
    list-style: none;
    text-align: center;
    display: table;
    margin: 0 auto;
    position: fixed;
    left: 32%;
    right: 25%;
    top:15px;
}


 ul li {
    position: relative;
    margin: 0;
    padding: 0;
    display: inline-block;
}

li ul {
    display: none;
}


 ul li a {
    display: inline-block;
    text-decoration: none;
    color: #eee;
    padding: 5px 0;
    white-space: nowrap;
    margin: 5px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid transparent;
}


 ul li a:hover {
    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #CACACA;

As you can see, when you scrool down, content div with pisition:absolute, covers all other divs with position:fixed. But I want that when you scrool down, content div would cover just header div and logo and ul would stay on top of everything. Just like in this page.

I'm not sure that I'm doing it right because I'm newbie at creating html. Is there any other way to make something like that?

Answer 1

Just use an higher z-index on your logo and nav and it will work as you wish.