Не могу понять позиционирование объектов и их положение при изменение масштаба

Question

Я не могу понять как работает позиционирование элементов. Есть элемент Родитель. Делаю я ему position: relative; А есть 4 элемента которые позиционируются от родителя. position: absolute; Вроде бы я правильно понял.

Вот как получилось:

Все дочерние элементы как я понял, позиционируются за счет Родителя. Но вот когда я меняю масштаб окна, то изменяется размер родителя. И как я понимаю, должна меняться позиция дочерних элементов. Но они не изменяют свою позицию, они остаются на том же месте и выходят за рамки Родителя.

Пример:

Пробовал я делать всем позицию в процентах % Но при масштабирование элементы набрасываются на себя, а мне такого не нужно. Расширение у меня монитора 1920x1080. И думаю у кого то больше оно будет, а у кого то меньше. Все будет выглядит глупо.

Как сделать так что бы они позиционировали при изменение масштаба и не сталкивались с друг другом? Прошу вашей помощи! Или простого объяснения. Спасибо заранее!

Код css и html:

#main_container{
    position: relative;
    padding: 20px;
    background-color: #fff;
}

.demonstation{
    position: relative;
}
.gift_icon{
    margin-left: 250px;
    border-radius: 10px 1px;
     box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
   width: 840px;
   height: 460px;
}

.heading{
    position: absolute;
    left: 1300px;
    top: 0;
    letter-spacing: 3px;
    font-size: 25px;
}
.info{
    position: absolute;
    top: 70px;
    left: 1276px;
    letter-spacing: 1px;
}
.info li{
    margin-bottom: 10px;
    font-size: 14px;
}

.btn{
    position: absolute;
    left: 1305px;
    bottom: 0px;
    font-size: 20px;
    font-family: monospace;
    color: #fff;
    background: linear-gradient(to left, #2b3537, #121617, #2b3537);
    text-decoration: none;
    padding: 20px 70px;
    border-radius: 10px 1px;
    background-size: 200%;
    transition: 0.5s;
}

.btn:hover{
    background-position: right;
}

<div id="main_container">
        <div class="container">
      <div class="demonstation">
        <img class="gift_icon" src="\public\images\test.jpg" alt="Нет отображения">
        <h2 class="heading">Заголовок</h2>
        <ul class="info">
          <li>Информация</li>
          <li>Информация</li>
          <li>Информация</li>
          <li>Информация</li>
          <li>Информация</li>
          <li>Информация</li>
        </ul>
        <a href="#" class="btn">Подробнее</a>
      </div>
    </div>
</div>

Размер родителя меняется в зависимости от картинки. main_container это для отступов от footer и header. Container содержимое в середине сайта.

Answer 1

Используйте flex. Всё ваше описание я обернул в контейнер. Убрал все absolute. Задаал блоку demonstation display: flex и justify-content: center, чтобы выстроить в ряд и разместить по центру страницу. И теперь Примерно так

#main_container{
    position: relative;
    padding: 20px;
    background-color: #fff;
}

.demonstation{
    position: relative;
    display: flex;
    gap: 20px;
    justify-content: center;
}
.gift_icon{    
    border-radius: 10px 1px;
     box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
   width: 840px;
   height: 460px;
}


.heading{    
    letter-spacing: 3px;
    font-size: 25px;
}
.info{
    
    letter-spacing: 1px;
}
.info li{
    margin-bottom: 10px;
    font-size: 14px;
}

.btn{
    
    font-size: 20px;
    font-family: monospace;
    color: #fff;
    background: linear-gradient(to left, #2b3537, #121617, #2b3537);
    text-decoration: none;
    padding: 20px 70px;
    border-radius: 10px 1px;
    background-size: 200%;
    transition: 0.5s;
}

.btn:hover{
    background-position: right;
}

<div id="main_container">
        <div class="container">
      <div class="demonstation">
        <img class="gift_icon" src="\public\images\test.jpg" alt="Нет отображения">
        <div class="desc">
            <h2 class="heading">Заголовок</h2>
            <ul class="info">
              <li>Информация</li>
              <li>Информация</li>
              <li>Информация</li>
              <li>Информация</li>
              <li>Информация</li>
              <li>Информация</li>
            </ul>
            <a href="#" class="btn">Подробнее</a>
        </div>      
      </div>
    </div>
</div>

БЛОГ НА HUSL

Не могу понять позиционирование объектов и их положение при изменение масштаба

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