在相对格/ h1之上放置一个固定div

Question

我有my work in progress website，它包含一个导航菜单，弹出一个按钮单击。我希望这个（固定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> 

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

我已经尝试改变一些事情的z-index的，但无济于事。

任何帮助表示赞赏！此元素上

Answer 1

广场非常高的z-index：

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

} 

演示：demo

解决：

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

希望... http://jsfiddle.net/6z8qc9pq/2/试试这个链接，作品，至少在Chrome ...