@Samogon4ik
Вроде бы человек

Правильно ли использовать position absolute & relative в верстках?

У меня есть верстка и для мелких деталей, или же настройки фона из элементов (не background) я использую position absolute (для родительского блока) и relative (для дочерних), правильно ли я поступаю?

Меня попросили сделать фон из текста (два больший под rotate) и flex + justify-content: space-between, но изза разной ширины элементов они стоят не ровно, поэтому я использовал позиционирование.

Часто на курсах ругали за position, правильным ли было решение?
  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
@alexalexes
Менять свойство position оправдано, если стоит задача в одном контейнере визуально наложить друг на друга дочерние блоки, которые в html не вложены друг в друга - по тексту иду один за другим.
Например, у вас есть контейнер div.photo__container с img и блоком описания div.photo__descr:
<div class="photo__container">
  <img src="photo.jpg"/>
  <div class="photo__descr">
    <p>Описание для фото</p>
  </div>
</div>

Если стили оставить как есть, то описание отобразится под изображением.
Чтобы наложить описание на фото, нужно изменить позиционирование блока описания.
Если мы тупо пропишем position: absolute для блока описания photo__descr, то этот блок убежит черт знает куда (точнее, спозиционируется относительно body, или ближайшего родителя, у которого будет position: relative).
div.photo__descr
{
  position: absolute;
}

Для этого нужно ограничить абсолютное позиционирование данного блока родительским блоком:
div.photo__container
{
  position: relative;
}

Далее, хотелось бы, чтобы блок приклеился к низу контейнера. Поскольку у нас блок в абсолютном позиционировании, то могут работать свойства top, right, bottom, left. Нужен bottom:
div.photo__descr
{
  position: absolute;
  bottom: 0;
}

Еще есть желание ограничить макс. высоту блока описания, можно воспользоваться процентами, причем они будут высчитываться от родительского блока position: relative:
div.photo__descr
{
  position: absolute;
  bottom: 0;
  max-height: 30%;
  overflow-y: auto; /* можно еще добавить возможность прокручивать содержимое при вертикальном переполнении */
}

Увы, чтобы работали процентные величины относительно родителя, нужно чтобы у родителя были заданы конкретные значения ширины и(или) высоты:
div.photo__container
{
  position: relative;
  height: 600px;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы