javascript - 为什么在我调整浏览器大小时我的 div 会重叠？

Question

我正在尝试创建一个简单的登录表单，在我调整浏览器大小之前它看起来不错。我正在与三个 <div> 一起工作这里的元素； center , center2和 center3 .它们都包含在 main 中. bgpc只是背景图片。

只要我调整浏览器的大小，3 个居中的 div 就会相互重叠，并且没有任何东西留在原处。

我已经尝试设置 position至 absolute或 relative在包装器和三个中心 div 中，但似乎没有任何效果。

#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

并删除 center-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>