Как избавиться от position: absolute в CSS

Пару месяцев назад автора этого материала спросили о проблеме, которая возникла именно из-за этой строки CSS. В решении свойства position не оказалось вообще.

Пока у нас стартует новый поток курса по фронтенду, рассказываем о случаях, когда position: absolute вполне заменим современным CSS.

Введение

Вернёмся на 5 лет назад. Тогда CSS flexbox был новинкой и не мог работать на 100 %, а CSS grid не поддерживался. Мы работали с позиционированием CSS. Но сегодня проблемы тех лет решаются при помощи CSS flexbox или grid.

Наложение карточек

Когда у нас есть карточка, содержащая текст поверх изображения, мы часто используем position: absolute для размещения содержимого поверх изображения. Это больше не нужно при использовании CSS grid.

Вот типичная карточка с текстом над изображением:

<article class="card">
    <div class="card__thumb">
        <img src="assets/mini-cheesecake.jpg" alt="">
    </div>
    <div class="card__content">
        <h2><a href="#">Title</a></h2>
        <p>Subtitle</p>
    </div>
</article>

Чтобы разместить содержимое над изображением, нужно позиционировать .card__content  абсолютно:

.card {
    position: relative;
}

.card__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0) bottom/100% 60% no-repeat;
    padding: 1rem;
}

Нет ничего плохого в position: absolute из примера выше, но почему не написать проще? Первый шаг — добавить display: gridк компоненту card. Задавать столбцы или строки не нужно:

.card {
    position: relative;
    display: grid;
}

.card__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

По умолчанию CSS grid создаёт строки автоматически, на основе контента. В нашей карточке основных элементов два, и поэтому получится две строки контента. Чтобы перекрыть содержимое с изображением, нужно разместить оба элемента на первой области сетки:

.card__thumb,
.card__content {
    grid-column: 1/2;
    grid-row: 1/2;
}

А лучше воспользоваться сокращением grid-area:

.card__thumb,
.card__content {
    grid-area: 1/2;
}

Наконец, мы также можем использовать grid-area: 1/-1.  -1 — последний столбец и строку в сетке, поэтому она всегда будет простираться до конца столбца или строки.

Метка карточки (must try)

Хочется расширить предыдущий пример и включить тег в верхнюю левую область карточки. Для этого нам нужно использовать ту же технику — grid-area: 1/-1, но не хочется, чтобы тег заполнил всю карточку.

Чтобы исправить проблему заполнения, нам нужно указать метке выравнивание по началу контейнера:

.card__tag {
    align-self: start;
    justify-self: start;
    /* Other styles */
}

Познакомьтесь с меткой, которая позиционируется над своим родителем без position: absolute:

Раздел Hero

Ещё один идеальный вариант — раздел hero с контентом, который перекрывает изображение.

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

• изображение;

• градиентное наложение;

• контент.

Это можно сделать разными способами. Если изображение исключительно декоративное, то подходит background-image. В противном случае можно воспользоваться <img>:

.hero {
    position: relative;
    min-height: 500px;
}

.hero__thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The overlay */
.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

.hero__content {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    text-align: center;
}

Вот так hero реализуется при помощи абсолютного позиционирования. Но можно сделать лучше.

Прежде всего добавим к hero свойство display: grid. И применим тот же принцип, что в компоненте карточки, то есть пропишем grid-area: 1/-1 в каждом прямом потомке элемента hero.

К сожалению, чтобы .hero__thumb работал, высоту hero придётся фиксировать. Если потомок элемента имеет свойство height: 100%, то его родитель должен иметь явное фиксированное свойство height, а не min-height.

.hero {
    display: grid;
    height: 500px;
}

.hero__content {
    z-index: 1; /* [1] */
    grid-area: 1/-1;
    display: flex;
    flex-direction: column;
    margin: auto; /* [2] */
    text-align: center;
}

.hero__thumb {
    grid-area: 1/-1;
    object-fit: cover; /* [3] */
    width: 100%;
    height: 100%;
    min-height: 0; /* [4] */
}

.hero:after {
    content: "";
    background-color: #000;
    opacity: 0.5;
    grid-area: 1/-1;
}

Пройду по отмеченным строкам, они важны:

1. Мы можем использовать z-index для элементов grid или flex. При этом нет необходимости добавлять position: relative.

2. Поскольку .hero__content  — элемент grid, свойство margin: auto центрирует его по горизонтали и вертикали.

3. Не забудьте включить object-fit: coverпри работе с изображениями.

4. Я использовал min-height: 0 для изображения на случай, если оно окажется большим. Это нужно, чтобы заставить grid соблюдать height: 100% и не делать изображение больше, чем секция hero, когда используется огромное изображение. Подробнее об этом читайте в статье о минимальном размере контента в CSS grid.

Заметили, что решение стало намного чище?

CSS display: contents

Я думаю, что это первый реальный случай использования display: contents, который был полезен. В примере ниже у нас есть содержимое и изображение.

Вот HTML-код примера:

<div class="hero">
    <div class="hero__content">
        <h2><!-- Title --></h2>
        <p><!-- Desc --></p>
        <a href="#">Order now</a>
    </div>
    <img src="recipe.jpg" alt="">
</div>

До сих пор ничего странного. На мобильных устройствах хочется добиться такого расположения:

Обратите внимание: изображение теперь расположено между заголовком и описанием. Как решить эту проблему? Можно подумать, что разметку нужно изменить так:

<div class="hero">
    <div class="hero__content">
        <h2><!-- Title --></h2>
        <img src="recipe.jpg" alt="">
        <p><!-- Desc --></p>
        <a href="#">Order now</a>
    </div>
</div>

Этот код может работать согласно ожиданиям, а на десктопе нужно расположить <img> справа. Он работает, но есть решение с display: contents и оно проще. Чтобы показать его, вернёмся к исходной разметке:

<div class="hero">
    <div class="hero__content">
        <h2><!-- Title --></h2>
        <p><!-- Desc --></p>
        <a href="#">Order now</a>
    </div>
    <img src="recipe.jpg" alt="">
</div>

Обратите внимание: содержимое обёрнуто внутри .hero__content. Как сообщить браузеру о нашем желании, чтобы <h2>, <p> и <a> стали прямыми потомками <img>? При помощи display: contents:

.hero__content {
    display: contents;
}

Элемент .hero__content теперь — скрытый призрак. Браузер будет парсить разметку вот так:

<div class="hero">
    <h2><!-- Title --></h2>
    <p><!-- Desc --></p>
    <a href="#">Order now</a>
    <img src="recipe.jpg" alt="">
</div>

И вот всё, что нам нужно сделать в CSS:

.hero {
    display: flex;
    flex-direction: column;
}

.hero__content {
    display: contents;
}

.hero h2,
.hero img {
    order: -1;
}

При правильном применении display: contents — это мощная техника, позволяющая добиться того, что ещё несколько лет назад было невозможно. Конечно, мы хотим так же обращаться со стилями десктопа:

@media (min-width: 750px) {
    .hero {
        flex-direction: row;
    }
    
    .hero__content {
        display: initial;
    }
    
    .hero h2,
    .hero img {
        order: initial;
    }
}

Упорядочиваем элементы компонента карточки

Ниже код варианта карточки, где заголовок размещается в её верхней части. Посмотрим на HTML:

<article class="card">
    <img src="thumb.jpg" alt="">
    <div class="card__content">
        <h3>Title</h3>
        <p>Description</p>
        <p>Actions</p>
    </div>
</article>

Обратите внимание: у нас есть два прямых потомка card: изображение thumb.jpg и div с классом card__content. Как с такой разметкой расположить заголовок <h3> вверху? Это можно сделать с помощью абсолютного позиционирования:

.card {
    position: relative;
    padding-top: 3rem;
    /* Accommodate for the title space */
}

.card h3 {
    position: absolute;
    left: 1rem;
    top: 1rem;
}

Однако это решение может не работать, когда заголовок слишком длинный.

Это происходит потому, что заголовок находится вне обычного потока, а значит, браузеру не важна его длина. При помощи display: contents можно добиться большего:

.card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.card__content {
    display: contents;
}

.card h3 {
    order: -1;
}

Это позволяет контролировать все дочерние элементы, при необходимости гибко настраивая их порядок свойством order.

Есть небольшая проблема: мы добавили padding: 1rem к родительскому элементу, поэтому изображение должно прилипать к краям. Вот как исправить ситуацию:

.card img {
    width: calc(100% + 2rem);
    margin-left: -1rem;
}

Центрирование

Можно встретить много шуток о том, что центрирование — это сложно. Но в наши дни центрировать элемент проще, чем когда-либо. Больше не нужно использовать position: absolute с transform. К примеру, для центрирования flex-элемента по горизонтали и по вертикали можно воспользоваться margin: auto:

.card {
    display: flex;
}

.card__image {
    margin: auto;
}

Я написал полное руководство по центрированию в CSS.

Соотношение сторон изображения

Новое свойство CSS aspect-ratio сегодня поддерживается во всех основных браузерах. Чтобы заставить бокс соблюдать определённое соотношение сторон, раньше мы использовали этот хак с padding:

.card__thumb {
  position: relative;
  padding-top: 75%;
}

.card__thumb img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

С aspect-ratio соблюдать соотношения проще:

/*  */
.card__thumb {
  position: relative;
  aspect-ratio: 4/3;
}

Подробности смотрите здесь.

Иногда лучше position: absolute

В этом примере содержимое (аватар, имя и ссылка) перекрывается обложкой карточки. У нас есть два варианта:

1. position: absolute для обложки карточки;

2. отрицательный margin для содержимого.

Посмотрим на два других решения. Какое из них больше подходит для нашего случая?

Использование абсолютного позиционирования

Так мы можем позиционировать прямоугольник абсолютно, а затем добавить padding: 1rem к содержимому карточки:

.card__cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
}

.card__content {
    padding: 1rem;
}

Таким образом, когда обложка карточки будет убрана, нам не придётся изменять CSS.

Использование отрицательного margin

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

.card__content {
    padding: 1rem;
    margin-top: -1rem;
}

Хотя это решение работает, когда обложка у карточки есть, оно может вызвать проблему:

Обратите внимание, что аватар находится за пределами своего родителя (карточки). Чтобы исправить это, изменим CSS и уберём отрицательный margin:

.card--no-cover .card__content {
    margin-top: 0;
}

Лучшим решением оказалось position: absolute. Здесь это свойство избавляет от лишнего CSS.

Дополнительные материалы

• Райан Маллиган опубликовал отличную статью о позиционировании оверлейного контента с помощью CSS-grid.

• Стефани Эклз написала замечательную статью об использовании CSS-grid для построения разделов hero.

Разобраться в современном CSS вы сможете на наших курсах:

• Узнать подробности акции

• Профессия Frontend-разработчик (7 месяцев)

• Профессия Fullstack-разработчик на Python (15 месяцев)