Html 将固定div定位在相对div/h1上方

我有一个包括导航菜单，点击一个按钮就会弹出一个。我希望这个（固定div）出现在

h1

标题上方

这是我的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>

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

我已经尝试过改变一些东西的z指数，但没有效果

---

感谢您的帮助

在此元素上放置非常高的z指数：

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

}

演示：

已解决：

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

---

希望。。。尝试此链接，至少在Chrome中有效…

但在Safari中无效。。。浏览器，浏览器，浏览器我明天会试试，如果你的答案行得通，我会接受的（我现在在手机上）。谢谢你的帮助。