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

Question

[Саман]

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

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

Часто на курсах ругали за position, правильным ли было решение?

Comments

[Арамаис Мирзоян]

Мне кажется, вам надо было делать наоборот, то есть родителю дать relative, а для дочерних использовать absolute.

[Сергей delphinpro]

Правильно использовать позиционирование правильно.
Как и всё остальное.

[Ankhena]

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

Без картинки сложно понять что попросили и без кода в песочнице codepen.io сложно узнать, что вы сделали.

Раз ругали, то вероятно есть решение без абсолютов.

absolute (для родительского блока) и relative (для дочерних), правильно ли я поступаю?

Обычно наоборот.

или же настройки фона из элементов (не background)

Веселая фраза. Фон, но не фон.

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

[Саман]

Ankhena, Насчет фона я имел ввиду, что это обычный текст который попросили поставить на родительский блок (это не стиль background или картинка)

Answer 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;
}