Как избавиться от 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 месяцев)

Другие профессии и курсы

Data Science и Machine Learning

• Профессия Data Scientist

• Профессия Data Analyst

• Курс «Математика для Data Science»

• Курс «Математика и Machine Learning для Data Science»

• Курс по Data Engineering

• Курс «Machine Learning и Deep Learning»

• Курс по Machine Learning

Python, веб-разработка

• Профессия Fullstack-разработчик на Python

• Курс «Python для веб-разработки»

• Профессия Frontend-разработчик

• Профессия Веб-разработчик

Мобильная разработка

• Профессия iOS-разработчик

• Профессия Android-разработчик

Java и C#

• Профессия Java-разработчик

• Профессия QA-инженер на JAVA

• Профессия C#-разработчик

• Профессия Разработчик игр на Unity

От основ — в глубину

• Курс «Алгоритмы и структуры данных»

• Профессия C++ разработчик

• Профессия Этичный хакер

А также

• Курс по DevOps

• Все курсы