Почему мои div перекрываются при изменении размера браузера?

Question

Я пытаюсь создать простую форму входа в систему, и она выглядит нормально, пока я не изменю размер своего браузера. Я работаю с тремя <div> элементами здесь;center, center2 и center3. Все они завернуты в main. bgpc это просто фоновая картинка.

Как только я изменю размеры браузера, 3 центральных делителя перекрывают друг друга, и ничто не остается на своем месте.

Я уже пытался установить position в absolute или relative в оболочке и в трех центральных делителях, но, похоже, ничего не работает.

#bgpc {
  float: bottom;
  height: 100%;
  background-position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  filter: blur(3px) brightness(50%);
  background-image: url("../images/background1.gif");
  /*background-image: url("../images/home_alt.png");*/
  /*background-image: url('../images/backTest.PNG');*/
}

#center {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #35ada7;
  padding: 5px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 10px;
  font-size: 180%;
  filter: drop-shadow(8px 8px 10px gray) opacity(75%);
  color: white;
  display: block;
}

#center2 {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(8px 8px 10px gray) opacity(75%);
  display: block;
}

#center3 {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(8px 8px 10px gray) opacity(75%);
  display: block;
}

#main {
  float: bottom;
}

<div id="main">
  <div id="bgpc"></div>
  <div id="center">
    <h1>MyCalc</h1>
    <b>Si</b>mple <b>Cal</b>culator
  </div>
  <div id="center3">
    <center>
      <h1 style="color: white">Log in to use the<br> Calculator</h1>
    </center>
  </div>
  <div id="center2">
    <form method="post" action="testAspx.aspx" class="login-form">
      <div class="input-container">
        <i class="fa fa-envelope"></i>
        <input type="email" id="userName" class="input" name="email" style="background-color: transparent; color: white" placeholder="Username" />
      </div>
      <div class="input-container">
        <i class="fa fa-lock"></i>
        <input type="password" id="loginPassword" class="input" name="password" style="background-color: transparent; color: white" placeholder="Password" />
        <i id="show-password" class="fa fa-eye"></i>
      </div>
      <input id="submit" type="button" name="login" value="Login" onclick="Schleife(0)" class="button" />
    </form>
  </div>
</div>

Answer 1

вы должны вложить свои элементы следующим образом:

  -- center
     --center-3
     --center-2

и удалить абсолютное позиционирование по центру-2 и 3, позволяя родительскому элементу обрабатывать позиционирование

Если бы я упростил его после этогоid просто вставьте содержимое и удалите center-2 и -3 и используйте flex box для центрирования.

.center {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  box-shadow: 9px 8px 10px 0px rgba(158, 155, 158, 1);
  padding: 5px 0 10px;
  flex: 1;
}

.column {
  padding: 0 16px;
}

.titles {
  background-color: #35ada7;
  color: white;
}

.main {
  display: flex;
  justify-content: center;
  align-content: center;
}

<div class="main">
  <div class="center">
    <div class="titles column">
      <h1>MyCalc</h1>
    </div>
    <div class="column">
      <p>Simple Calculator</p>

      <h1>Log in to use the<br> Calculator</h1>
      <form method="post" action="testAspx.aspx" class="login-form">
        <div class="input-container">
          <i class="fa fa-envelope"></i>
          <input type="email" id="userName" class="input" name="email" style="background-color: transparent;" placeholder="Username" />
        </div>
        <div class="input-container">
          <i class="fa fa-lock"></i>
          <input type="password" id="loginPassword" class="input" name="password" style="background-color: transparent;" placeholder="Password" />
          <i id="show-password" class="fa fa-eye"></i>
        </div>
        <input id="submit" type="button" name="login" value="Login" onclick="Schleife(0)" class="button" />
      </form>
    </div>

  </div>
</div>