Элементы неуместны при изменении размера браузера

#html #css

#HTML #CSS

Вопрос:

Я пытаюсь создать маску входа в систему, но, к сожалению, не могу найти способ решить свою проблему.

Проблема в том, что при изменении размера браузера некоторые элементы перемещаются не так, как другие, в результате чего вся страница выглядит испорченной.

 body {  background-color: #f8f9fa;  text-align: center;  margin: 0 0 0 0; }  .p1 {  position: absolute;  font-size: 8px;  font-weight: normal;  font-family: Arial;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  text-decoration: none; }  .Login {  position: absolute;  top: 18%;  left: 41%;  font-size: 20px;  font-weight: normal; }  .email input {  position: absolute;  top: 25.5%;  left: 41%; }  .pw input {  position: absolute;  top: 34%;  left: 41%; }  .pass {  position: absolute;  top: 38.4%;  left: 52.2%;  font-size: 2px;  font-weight: normal;  text-decoration: none; }  .btn {  position: absolute;  top: 42%;  left: 46.8%;  font-size: 18px;  text-decoration: none; }  .bottom-container {  background-color: #e9ecef;  padding: 20px 0 20px;  margin-bottom: 0; }  .footer-link {  color: #35398E;  text-decoration: none;  font-size: 0.75rem;  font-weight: normal; }  .copyright {  font-size: 0.75rem;  color: #000000;  padding: 20px 0; } 
 lt;html lang="en" dir="ltr"gt;  lt;headgt;  lt;meta charset="utf-8"gt;  lt;titlegt;Amazon Loginpage_Lynn's Redesignlt;/titlegt;  lt;link rel="stylesheet" href="css/styles.css"gt; lt;/headgt;  lt;bodygt;  lt;centergt;  lt;img class="amazon" src="Images/amazonlogo.png" width="130" height="40" alt=""gt;  lt;/centergt;  lt;div class="top-container"gt;  lt;centergt;  lt;img class="loginbox" src="Images/Artboard 1.png" alt=""gt;  lt;div class="Login"gt;Loginlt;/divgt;  lt;div class="email"gt;  lt;input type="email" placeholder="Email/Mobiltelefonnummer" requiredgt;  lt;/divgt;  lt;div class="pw"gt;  lt;input type="password" placeholder="Passwort" requiredgt;  lt;/divgt;  lt;div class="pass"gt;  lt;a href="https://www.amazon.de/ap/forgotpassword?_encoding=UTF8amp;openid.assoc_handle=deflexamp;openid.claimed_id=http://specs.openid.net/auth/2.0/identifier_selectamp;openid.identity=http://specs.openid.net/auth/2.0/identifier_selectamp;openid.mode=checkid_setupamp;openid.ns=http://specs.openid.net/auth/2.0amp;openid.ns.pape=http://specs.openid.net/extensions/pape/1.0amp;openid.pape.max_auth_age=0amp;openid.return_to=https://www.amazon.de/gp/css/account/forgot-password/email.html?ie=UTF8&%2AVersion%2A=1&%2Aentries%2A=0"gt;  Passwort vergessen  lt;/agt;  lt;/divgt;   lt;div class="anmelden"gt;  lt;a class="btn" href="https://www.amazon.de/ap/signin?openid.pape.max_auth_age=0amp;openid.return_to=https://www.amazon.de/ref=nav_signinamp;openid.identity=http://specs.openid.net/auth/2.0/identifier_selectamp;openid.assoc_handle=deflexamp;openid.mode=checkid_setupamp;openid.claimed_id=http://specs.openid.net/auth/2.0/identifier_selectamp;openid.ns=http://specs.openid.net/auth/2.0amp;"gt;  Anmeldenlt;/agt;  lt;/divgt;  lt;brgt;  lt;p class="p1"gt;Mit Ihrer Anmeldung erklären Sie sich mit unserelt;brgt;  lt;a class="AG" href="https://www.amazon.de/gp/help/customer/display.html/ref=ap_signin_notification_condition_of_use?ie=UTF8amp;nodeId=505048"gt;  Allgemeinen Geschäftsbedingungenlt;/agt; einverstanden.  lt;/pgt;  lt;centergt;  lt;div class="rere"gt;  lt;img src="Images/resinbal.png" alt=""gt;  lt;/centergt;  lt;/divgt;  lt;/divgt;  lt;/divgt;   lt;centergt;  lt;div class="bottom-container"gt;  lt;a class="footer-link" href="https://www.amazon.de/gp/help/customer/display.html/ref=ap_desktop_footer_cou?ie=UTF8amp;nodeId=505048"gt;Unsere AGB amp;nbsp; amp;nbsp;lt;/agt;  lt;a class="footer-link" href="https://www.amazon.de/gp/help/customer/display.html/ref=ap_desktop_footer_privacy_notice?ie=UTF8amp;nodeId=3312401"gt;Datenschutzerklärung amp;nbsp; amp;nbsp;lt;/agt;  lt;a class="footer-link" href="https://www.amazon.de/gp/help/customer/display.html?nodeId=508510"gt;Hilfe amp;nbsp; amp;nbsp;lt;/agt;  lt;a class="footer-link" href="https://www.amazon.de/gp/help/customer/display.html/ref=ap_footer_imprint?ie=UTF8amp;nodeId=202024860"gt;Impressum amp;nbsp; amp;nbsp;lt;/agt;  lt;a class="footer-link" href="https://www.amazon.de/gp/help/customer/display.html/?nodeId=201890250"gt;Hinweise zu Cookies amp;nbsp; amp;nbsp;lt;/agt;  lt;a class="footer-link" href="https://www.amazon.de/gp/help/customer/display.html/?nodeId=201909150"gt;Hinweise zu interessenbasierter Werbung amp;nbsp; amp;nbsp;lt;/agt;  lt;brgt;lt;brgt;  lt;p2 class="copyright"gt;© 2021 Lynn Kim.lt;/p2gt;  lt;/divgt;  lt;/centergt;  lt;/bodygt;  lt;/htmlgt; 

Комментарии:

1. Вы используете позицию:абсолютная. Это определенно не очень хорошая идея. Вместо этого используйте дисплей:гибкий