<div> 双重扩展，html 和 <div> 构建的问题

Question

在扩展 <div> 元素时遇到一些问题。

我有 2 个buttons，一个在右上角，一个在左上角。每个按钮扩展一个隐藏区域。

我的问题是当一个区域被扩展然后你扩展另一个区域时，它会在<div> 中创建更多空间。我不确定如何解决这个问题。 Here is a screenshot of the description above，我将包含必要的代码。谢谢大家！

function main() {

  $('.form-login').hide();
  $('.form-register').hide();
  $('.sub-elements').hide();

  $('.main-elements').on('click', function() {
    $(this).find('.sub-elements').slideToggle(300);
  });

  $('.login-button').on('click', function() {
    $('.form-login').slideToggle(300);
  });
  $('.register-button').on('click', function() {
    $('.form-register').slideToggle(300);
  });


}
$(document).ready(main);

.form-login {
  border-style: dashed;
  border-color: green;
  margin: 25px 1000px 0px 0px;
  width: 15%;
  color: whitesmoke;
  font-family: 'sans-serif';
  font-size: 14px;
}
.form-register {
  border-style: dashed;
  border-color: blue;
  margin-left: 1110px;
  width: 15%;
  color: whitesmoke;
  font-family: 'sans-serif';
  border-style: dashed;
  border-color: purple;
  font-size: 14px;
  margin-top: 10px;
}
.header {
  font-size: 125px;
  text-align: center;
  width: auto;
  border-style: dashed;
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <button class="login-button">Login</button>
  <button class="register-button">Register</button>
  <div class="form-login">
    <form>
      Email
      <br>
      <input type="text" name="email">
      <br>Password
      <br>
      <input type="text" name="password">
      <br>
    </form>
  </div>
  <div class="form-register">
    <form>
      First Name
      <br>
      <input type="text" name="email">
      <br>LastName
      <br>
      <input type="text" name="password">
      <br>Email Adress
      <br>
      <input type="text" name="email">
      <br>Password
      <br>
      <input type="text" name="password">
      <br>Re-Enter Password
      <br>
      <input type="text" name="password">
      <br>
    </form>
  </div>
  <img src="images/iceland.png" alt="Downtown" height="30%" width="55%" />
</div>

Answer 1

当您显示一个空格时 - 只需确保隐藏另一个空格：

function main(){

  $('.form-login').hide();
  $('.form-register').hide();
  $('.sub-elements').hide();

  $('.main-elements').on('click',function(){
      $(this).find('.sub-elements').slideToggle(300);
   });

   $('.login-button').on('click',function(){
     $('.form-register').slideUp(300);
      $('.form-login').slideToggle(300);
   });
   $('.register-button').on('click',function(){
     $('.form-login').slideUp(300);
      $('.form-register').slideToggle(300);
   });


}
$(document).ready(main);

.form-login{
  border-style: dashed;
  border-color: green;
  margin: 25px 1000px 0px 0px;
  width: 15%;
  color: whitesmoke;
  font-family: 'sans-serif';
  font-size: 14px;
}

.form-register{
  border-style: dashed;
  border-color: blue;
  margin-left: 1110px;
  width: 15%;
  color: whitesmoke;
  font-family: 'sans-serif';
  border-style: dashed;
  border-color: purple;
  font-size: 14px;
  margin-top: 10px;


}

.header {
  font-size: 125px;
  text-align:center;
  width: auto;
  border-style: dashed;
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "header">
            <button class = "login-button">Login</button>
            <button class = "register-button">Register</button>
            <div class = "form-login">
              <form>
                Email<br>
                <input type = "text" name = "email"><br>
                Password<br>
                <input type = "text" name = "password"><br>
              </form>
            </div>
            <div class = "form-register">
              <form>
                First Name<br>
                <input type = "text" name = "email"><br>
                LastName<br>
                <input type = "text" name = "password"><br>
                Email Adress<br>
                  <input type = "text" name = "email"><br>
                Password<br>
                  <input type = "text" name = "password"><br>
                Re-Enter Password<br>
                  <input type = "text" name = "password"><br>
              </form>
            </div>
            <img src = "images/iceland.png" alt = "Downtown" height="30%" width="55%"/>
          </div>

Answer 2

将以下代码添加到 CSS。

.form-login, .form-register
{
    position:absolute;
}