當我調整瀏覽器大小時，為什么我的 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>