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 { background: black;
          height: 90px;
          position: fixed;
          width: 100%;z-index:9;}

演示：demo

解决：

RESET SLAVE

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

将固定div放在相对div / h1之上

1 个答案: