Position a fixed div above a relative div/h1

I have my work in progress website that includes a navigation menu that pops out one a button click. I want this (fixed div) to appear above the h1 headline.

Here is my HTML:

<div id="topbar">
    <div id="logo"><img src="images/title.png" style="color: gold;" alt="jamesthistlewood.co.uk" /></div><div id="menu" onclick="toggleMenu();"></div>
    <div id="menuitems"><div id="menuitem">About</div><div id="menuitem">Jobs</div><div id="menuitem">Portfolio</div></div>
</div>
<div id="main">
    <div id="leftpanel">
      <div id="cycler">
        <a href="http://readometer.co.uk" target="_blank"><img class="active" src="images/readometer.png" alt="Read-o-meter" /></a>
        <a href="http://trailhunter.co.uk" target="_blank"><img src="images/trailhunter.png" alt="My image" /></a>
        <a href="http://jamesthistlewood.co.uk/chatter" target="_blank"><img src="images/chatter.png" alt="My image" /></a>
        <!-- ignore the cycler, this makes no difference to the problem -->
      </div>
    </div>
    <div id="rightpanel">
      <h1>Headline Text goes right here</h1>
    </div>
  </div>
</div>

Here is my CSS:

body { margin: 0;
       background: #FEFEFE;
       font-family: "actor", sans-serif;
}

#topbar { background: black;
          height: 90px;
          position: fixed;
          width: 100%;}

#topbar #logo {position: absolute;
               left: 20px; height: 68px;
               }

#topbar #logo img { height: 85px; padding: 2.5px 0 2.5px 0;}

#topbar #menu {position: absolute;
               right: 20px; top: 10px;
               height: 70px; width: 70px;
               background-image: url("images/menu1.png");}

#topbar #menu:hover {background-image: url("images/menu2.png");}

#topbar #menuitems { position: fixed;
                    background: white;
                    width: 150px; min-height: 10px;
                    right: 20px; top: 95px;
                    border: 1px solid #CDCDCD;

}

#topbar #menuitems #menuitem { 
  font-weight: bold; text-transform: uppercase; padding: 5px;
  height: 30px; text-align: center; float: top;
  line-height: 30px;
}

#topbar #menuitems #menuitem:hover {
  background: grey;
}

#main { position: relative;
        top: 90px;
        width: 100%;
        z-index:2;

}

h1 { text-transform: uppercase; letter-spacing: 2px;}

#leftpanel {width: 50%; float: left;}
#rightpanel {width: 50%; float: right;}

I have already tried changing the z-index of some things, but to no avail.

Any help is appreciated!