固定菜单栏时元素在菜单栏上滚动答案

【问题标题】：Elements scrolling over menu bar when menu bar is fixed固定菜单栏时元素在菜单栏上滚动
【发布时间】：2013-08-28 08:36:11
【问题描述】：

总结：我希望我的菜单栏得到修复（我已经实现了），但是我遇到了一个问题，即在滚动过程中，内容会移动到固定的菜单栏上，而不是在菜单栏下. 我检查了不同的网站，我在 SO CSS - Make Content Appear Beneath a Fixed DIV Element 上看到了一个相关的问题但这对我不起作用，我想知道为什么？这是我的html代码：

      <!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="fixed.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <table class="fixed-bar" width="1333" height="48" border="0" align="center">
            <tr>
                <td width="96" rowspan="2">&nbsp;</td>

                <td><hsso style="font:'Trebuchet MS', Arial, Helvetica, sans-serif; text-shadow:#0C0 0.1em 0.1em 0.3em; color:#030; font-size:32px; text-align:center;"> Fixed Bar.</hsso></td>
        <td><a class="linear" href="signup">
                <span>Sign Up </span>

            </a>
        </td>
    </tr>
    <tr>
        <td  class="nav-bar1" align="left">   



        </td>
        <td width="158" align="left">&nbsp;</td>
    </tr>
</table>
        <div style="height: 80px; width: 100%;"></div> 
 <table width="361" height="891" border="0" align="center" class="tab1" >
    <tr>
        <td width="467" align="center"><input placeholder="Username" autocomplete="on" class="inp" type="text" name="un" id="un"></td>
    </tr>
    <tr>
      <td align="center"><input placeholder="Password" autocomplete="on" class="inp" type="text" name="pw" id="pw"></td>
    </tr>
    <tr>
      <td align="center"><input placeholder="Re-enter Password" autocomplete="on" class="inp" type="text"></td>
    </tr>
    <tr>
      <td align="center"><input placeholder="First Name" autocomplete="on" class="inp" type="text" name="fn" id="fn"></td>
    </tr>
    <tr>
      <td align="center"><input placeholder="Last Name" autocomplete="on" class="inp" type="text" name="ln" id="ln"></td>
    </tr>
    <tr>
        <td align="center"><select class="sel"   name="st"  id="st">
        <option>Please Select your Set</option>
        <option>1997/1998</option>
        <option>1998/1999</option>
        <optiom>1999/2000</optiom>
        <option>2001/2002</option>
        <option>2002/2003</option>
        <option>2003/2004</option>
        <option>2005/2006</option>
        <option>2006/2007</option>
        <option>2007/2008</option>
        <option>2008/2009</option>
        <option>2009/2010</option>
        <option>2010/2011</option>
        <option>2011/2012</option>
        <option>2012/2013</option>

      </select></td>
    </tr>
    <tr>
      <td  align="center"><input placeholder="Email" autocomplete="on" class="inp" type="text" name="em" id="em"></td>
    </tr>
    <tr>
      <td align="center"><input class="reg" type="submit" name="reg" id="reg" value="     Register     "></td>
    </tr>

  </table>
    </body>
</html>

还有我的 CSS：

table.fixed-bar{
      box-shadow:#0C0 0.1em 0.2em 0.5em 0.1em;
    border-radius: 8px;
    position: fixed; 
    top: 0; 
    width: 100%; 
    left: 0; 
    clear: both;

}
table.tab1{
     border-radius: 8px;
    box-shadow:#0C0 0.1em 0.2em 0.5em 0.1em;  

}

谢谢。

【问题讨论】：

标签： html css menu menubar

【解决方案1】：

您没有为固定位置元素分配背景。

尝试给它一个背景颜色，它不应该再透明了。

background:#fff;

解决方案：

http://jsfiddle.net/8T2zt/

【讨论】：

谢谢，效果很好。但是在我的实际项目中它不起作用，即使添加了背景属性。你知道为什么吗？
您的真实项目是否托管？还是本地的？它应该可以工作，除非您在更新文件后不保存文件。

【解决方案2】：

你应该给.fixed-bar一个更高的z-index。

.fixed-bar { z-index: 1000; }

【讨论】：

【解决方案3】：

我必须同时拥有 z-index 属性，给它一个高值并设置背景属性。

【讨论】：