slidedown和Z指數的問題？

Question

這是我的site。所以，如果你按登錄鏈接（左上），你可以看到一個div滑落。它的工作原理，問題是，當我開始用Ctrl +滾動播放，一切從div已經開始改變它的位置

這是JS和HTML代碼：

<div id="container" class="container" style= ""> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".login").click(function(){ 
       $(".login-data").slideDown(); 
      }); 
      $(".close-login").click(function(){ 
       $(".login-data").slideUp(); 
      }) 
     }); 
     </script> 
     <div class ="preheader"> 
      <span><a href ="#"> My Account </a></span> | <span><a href ="#" class="login">Login </a></span> 
     </div> 
     <div style="clear:both"></div> 
     <div class ="login-data"> 
      <form action ="#" method="POST"> 
       <div class ="login-inputs"> 
        <input type="text" placeholder= "Username"><br> 
        <input type="password" placeholder= "Password"><br> 
        <input type="submit" value="Login"> 
       </div> 
       <div class ="close-login"> 
        X 
       </div> 
       <div style="clear:both"></div> 
      </form> 
     </div> 
     <div style="clear:both"></div> 

..... .. 這是CSS：

.preheader{ 
    float:right; 
    padding:3px 
    ;margin-bottom: 5px; 
    z-index:-1; 
} 
.login-data{ 
    padding :10px; 
    background: none repeat scroll 0% 0% #8AB928; 
    width:25%; 
    display:none; 
    z-index:1000; 
    /*float:right;*/ 
    position:absolute; 
    left:60%; 
} 
.login-inputs{ 
    float:left; 
    width:60%; 
} 
.close-login{ 
    float:left; 
    width:30%; 
} 
.close-login:hover{ 
    background: none repeat scroll 0% 0% #555; 
    cursor: pointer; 
} 

我應該怎麼做，使這項工作？

Answer 1

你的問題是.login-data的position:absolute屬性與你的身體有關。當你變焦時，#container越來越小，但.login-data仍然朝向身體。 .login-data需要涉及#container。

嘗試將position: relative添加到#container並將right: 0;設置爲.login-data。現在，.login-data定位於#container，位於#container的右上角。它看起來不錯，當我開始玩CTRL +滾動。

#container { 
    ... 
    position:relative; 
    ... 
} 
.login-data{ 
    padding :10px; 
    background: none repeat scroll 0% 0% #8AB928; 
    width:25%; 
    display:none; 
    z-index:1000; 
    position:absolute; 
    right:0; 
} 

問候