18.10.2021

Меньше абсолютного позиционирования с современным CSS

Меньше абсолютного позиционирования с современным CSS

От создателя: каждый раз, когда я работаю над компонентом, которому требуется абсолютное размещение, я спрашиваю себя: действительно ли это нужно? Я заметил несколько вариантов использования, в которых нет необходимости в position:absolute. Мне показалось это увлекательным, и захотел, задокументировать варианты использования, с которыми я обычно сталкивался, работая над проектами.

В этой статье я рассмотрю несколько вариантов использования, в которых абсолютное размещение не требуется.

Вступление

Если мы вернемся на 5 лет обратно, CSS flexbox был все еще новым и не мог использовать соответствующих отступов. CSS-grid тогда даже не поддерживалась. В конце концов, мы использовали размещение CSS для достижения желаемого макета. Но в наши дни некоторые из этих вариантов использования можно разрешить с помощью CSS flexbox или grid.
На деньках мы работали над фронтендом целевой странички, и мой партнер спросил меня о дилемме с макетом, с которой он столкнулся. Неувязка возникла из-за position:absolute, я попробовал помочь, и мы исправили эту делему, даже не используя позиционирование CSS.

Случаи использования с примерами

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

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

Меньше абсолютного позиционирования с современным CSS

Это обычная карточка с текстом поверх изображения. Вот HTML:

Чтоб разместить контент поверх изображения, нам необходимо позиционировать .card__content абсолютно.

CSS

В приведенном выше примере нет ничего отвратительного, но почему бы не использовать более обычное решение? Давайте исследуем это.

Первым делом необходимо добавить display:grid в компонент карты. Нам не необходимо устанавливать какие-либо столбцы или строки.

CSS

Меньше абсолютного позиционирования с современным CSS

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

CSS

Более того, мы можем использовать падение grid-area:

CSS

Меньше абсолютного позиционирования с современным CSS

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

Card Tag

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

Меньше абсолютного позиционирования с современным CSS

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

CSS

Познакомьтесь с тегом, который размещен над его родительским элементом, без использования position:absolute. Демо.

Herо-раздел

Еще один безупречный вариант использования — это hero-раздел с содержимым, перекрывающим изображение.

Меньше абсолютного позиционирования с современным CSS

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

Меньше абсолютного позиционирования с современным CSS

Есть различные способы реализовать это. Если изображение носит чисто декоративный нрав, можно использовать background-image. В противном случае мы можем использовать элемент img.

CSS

Вот как мы можем воплотить hero-раздел, используя абсолютное позиционирование. Однако мы можем достигнуть большего. Давайте исследуем современный подход.

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

Меньше абсолютного позиционирования с современным CSS

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

CSS

Я желаю пройтись по пронумерованным строкам кода, так как они важны:

Мы можем использовать z-index сетки либо flex элемента. Вообще не нужно добавлять position:relative.

Так как .hero__content это элемент сетки, внедрение margin:auto будет центрировать его по горизонтали и вертикали.

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

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

Обратите внимание, как мы пришли к еще более чистому решению. Демо.

CSS display:contents

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

Меньше абсолютного позиционирования с современным CSS

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

Меньше абсолютного позиционирования с современным CSS

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

На мобильном телефоне все может работать как положено. На рабочем столе нам нужно расположить img с правой стороны. И несмотря на то что это работает, но есть более обычное решение display:contents. Вернемся к начальной разметке.

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

CSS

Браузер проанализирует разметку последующим образом.

Все, что нам необходимо сделать в CSS, это следующее.

CSS

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

CSS

Демо

Изменение около элементов компонентов карты

Меньше абсолютного позиционирования с современным CSS

В этом примере у нас есть вариант карты, в которой заголовок помещается вверху карты. Давайте поглядим на разметку HTML.

Обратите внимание, что у нас есть два прямых дочерних элемента: ползунок и содержимое. Как с таковой разметкой мы можем расположить заголовок h3 вверху? Мы можем сделать это с помощью абсолютного позиционирования.

CSS

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

Меньше абсолютного позиционирования с современным CSS

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

CSS

Это позволит нам держать под контролем все дочерние элементы и иметь возможность записывать их по мере необходимости с помощью характеристики order.

Меньше абсолютного позиционирования с современным CSS

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

CSS

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

Когда дело доходит до центрирования, вы увидите огромное количество шуток о том, как это трудно. В наши дни центрировать элемент намного проще, чем когда-либо.

Больше не необходимо использовать преобразования position:absolute. Например, мы можем использовать margin:auto для центрирования гибкого элемента как по горизонтали, так и по вертикали.

CSS

Меньше абсолютного позиционирования с современным CSS

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

Новое свойство CSS aspect-ratio сейчас поддерживается во всех основных браузерах. Ранее мы использовали отступы, чтобы соблюдать определенное соотношение сторон.

CSS

С новым aspect-ratio это намного проще.

CSS

Время от времени лучше использовать рosition:аbsolute

Меньше абсолютного позиционирования с современным CSS

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

Использовать position:absolute для обложки карты

Использовать отрицательное поле для содержимого

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

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

Меньше абсолютного позиционирования с современным CSS

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

CSS

Таким образом, когда покрытие карты убирается, нам не необходимо редактировать или изменять CSS.

Меньше абсолютного позиционирования с современным CSS

Внедрение отрицательных полей

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

CSS

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

Меньше абсолютного позиционирования с современным CSS

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

CSS

В итоге — использование position:absolute оказалось наилучшим решением, так как избавит нас от написания дополнительных CSS. Надеюсь, вам приглянулась статья. Спасибо за чтение!

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *