Как закрепить элемент сайта на конкретном месте

Question

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

.settings {
    display: flex;
    justify-content: space-around;
}

.backgroung_image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(YouTube2.png);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.content {
    position: relative;
    z-index: 1;
}

body {
    overflow-x: hidden;  /* Предотвращает скролл по оси X */
 }

 /*Делает фон не кликабелным*/

 img {
    pointer-events: none;   
 }

.settings{
    display: flex;
    justify-content: space-around;
}

.block {
    display: inline-block;
    position: absolute;
    top: 400px;
    left: 330px;
    width: 500px;
    height: 400px;
    background-color: #c9c9c9;
    border-radius: 20px;
}

.reg_block {
    display: inline-block;
    position: absolute;
    top: 70px;
    left: 330px;
    width: 500px;
    height: 500px;
    background-color: #c9c9c9;
    border-radius: 20px;
}

.btn {
    display: inline-block;
    position: relative;
    top: 148px;
    margin: 60px ; /* Добавляем отступы, чтобы кнопки не перекрывали друг друга */
    overflow: auto;
    background: #a9a9a9;
    padding: 1rem 1rem; /* Размер кнопки */
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    text-align: center;
    transition: 0.5s; /* Время анимации hover */
}

.btn:hover {
    background: #888888;
}

.submit {
    height: 40px;
    transition: 0.2s;
}

.submit:hover {
    background: #bcbcbc;
}

.iiccon {
    width: 50%;
    height: 50%;
}

.email {
    position: absolute;
    top: 140px;
    left: 65px;
    width: 350px;
    height: 30px;
    font-size: 20px;

}

.password {
    position: absolute;
    top: 220px;
    left: 65px;
    width: 350px;
    height: 30px;
    font-size: 20px;

}

.Login {
    position: absolute;
    top: 320px;
    left: 150px;
    width: 180px;
    height: 50px;
    border: 1px solid black;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    transition: 0.5s;
}

.Login:hover {
    cursor: pointer;
    background: #bcbcbc;
}

.reg_nickname {
    position: absolute;
    top: 140px;
    left: 65px;
    width: 350px;
    height: 30px;
    font-size: 20px;
}

.reg_email {
    position: absolute;
    top: 220px;
    left: 65px;
    width: 350px;
    height: 30px;
    font-size: 20px;

}

.reg_password {
    position: absolute;
    top: 300px;
    left: 65px;
    width: 350px;
    height: 30px;
    font-size: 20px;

}

.Registration {
    position: absolute;
    top: 400px;
    left: 90px;
    width: 300px;
    height: 50px;
    border: 1px solid black;
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    transition: 0.5s;
}

.Registration:hover {
    cursor: pointer;
    background: #bcbcbc;
}

.reg-font {
    position: absolute;
    top: 265px;
    left: 65px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

.video {
    position: absolute;
    bottom: 30px;
}

<!DOCTYPE html>
<html lang="ru">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="CSS/Youtube_style.css">
   <link rel="shortcut icon" href="youtube_icon.png">
   <title> YouTube </title>
</head>

<style>
</style>

<body>

   <div class="container">
      <div id="wall" class="background">
         <img src="YouTube2.png" alt=" " style="position: absolute; width: 100%;">
       </div>
   </div>

   <form style="position: relative; left: 330px; top: 180px; ">
       <input style="width: 350px; height: 40px;" placeholder="Искать..." type="search">
       <button type="submit" class="submit"> Поиск </button>
   </form>

   <div>
      <a href="youtube.html" class="btn" style="text-decoration: none; color: #000000;">Главная</a>
      <a href="Trands.html" class="btn" style="text-decoration: none; color: #000000;">Тренды</a>
      <a href="Subscriptions.html" class="btn" style="text-decoration: none; color: #000000;">Подписки</a>
      <a href="Account.html" class="btn" style="text-decoration: none; color: #000000;">Аккаунт</a>
   </div>

   <div class="block">
      <div style="position: absolute; left: 160px; top: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 70px;">Вход</div>
      <input class="email" placeholder="Почта" type="email" >
      <input class="password" placeholder="Пароль" type="password">
      <button id="Reg" class="Login" type="submit" >Войти </button>
      <span class="reg-font">Нет аккаунта? <a href="Registration.html" style="text-decoration: none;" target="_blank">Зарегистрируйтесь</a></span>
   </div>
</body>

<script src="Js/reg.js"></script>

Answer 1

Есть хорошая идея. Вместо px (пиксели), можно поставить проценты - %. То есть, 40% от всего экрана браузера сверху будет top: 40%, вот так!

БЛОГ НА HUSL

Как закрепить элемент сайта на конкретном месте

Ответы (1 шт):