当我调整浏览器大小时，为什么我的 div 会重叠？

Question

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

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

我已经尝试在包装器和三个中心 div 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

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