Блог

это мой сайт. Итак, если вы нажмете ссылку для входа (вверху слева), вы увидите скольжение вниз 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;
}
  

Что я должен сделать, чтобы это сработало?

Ваша проблема в том, что position:absolute свойство .login-data относится к вашему телу. Когда вы увеличиваете масштаб #container , он становится меньше / больше, но .login-data все еще ориентируется на тело. .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;
}
  

Приветствую