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

您的问题是position:absolute的{{1}}属性与您的身体有关。当你缩放时，.login-data越来越小，但#container仍然在身体上。 .login-data需要与.login-data相关联。

尝试将#container添加到position: relative并将#container设置为right: 0;。现在，.login-data定位于.login-data，位于#container的右上方。当我开始使用ctrl + scroll进行播放时看起来很不错。

#container

问候

slidedown和z-index问题？

1 个答案: