jquery - slidedown 和 z-index 问题？

Question

这是我的 site .因此，如果您按下登录链接(左上角)，您可以看到向下滑动一个 div。它有效，问题是当我开始使用 ctrl + scroll 时，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 属性与您的 body 有关。当您缩放时，#container 变小/变大，但 .login-data 仍指向 body 。 .login-data 需要与 #container 相关。

尝试将 position: relative 添加到 #container 并将 right: 0; 设置为 .login-data .现在 .login-data 指向 #container 并且位于 #container 的右上角。当我开始使用 ctrl + scroll 时看起来不错。

#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;
}

问候