메뉴 막대가 고정되어있을 때 메뉴 막대 위로 스크롤되는 요소

요약 : 메뉴 막대를 고정시키고 싶습니다 (달성 한 것입니다). 그러나 스크롤하는 동안 고정 된 메뉴 위로 이동하는 문제가 있습니다. 막대 대신 메뉴 모음 아래에 표시됩니다. 다른 사이트를 확인한 결과 SO에 관한 관련 질문을 여기에서 보았습니다. CSS - Make Content Appear Beneath a Fixed DIV Element 하지만 나에게 도움이되지 않습니다. 왜 그런지 궁금합니다.메뉴 막대가 고정되어있을 때 메뉴 막대 위로 스크롤되는 요소

 <!-- 
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 코드이다.

출처

2013-08-25 Omiye Jay Jay