От автора: очень популярная в веб-дизайне в настоящее время вещь — это перекрывающиеся изображения. Когда вам, как разработчику, передается проект, есть несколько способов реализовать это — как и почти всегда в CSS.
Один из способов, который вы могли бы использовать — это абсолютно позиционировать один элемент с более низким z-индексом, чтобы другое изображение располагалось сверху, настроить ширину каждого изображения, чтобы мы могли видеть их оба, и это будет работать, верно?
Нуууу, когда вам понадобится текст или любой другой контент после изображений, вы столкнетесь с проблемой. Если элемент с абсолютным позиционированием выше статического (верхнего) изображения, следующий контент будет перекрывать изображения. Это связано с высотой изображения с абсолютным позиционированием, оно не распознается, поскольку находится вне потока документов (нормальное поведение для элемента с абсолютным позиционированием). Чтобы обойти это, вы можете начать экспериментировать с произвольной высотой изображений, и тогда компонент станет очень хрупким, ограниченным и не стабильным.
Я не рекомендую это. Пример того, о чем я говорю, здесь:
Хорошая новость: есть гораздо лучший способ, и не пытайтесь сделать это первым способом, если только вам не нравится головная боль.
Я опишу два надежных подхода к перекрывающимся изображениям.
Метод 1: CSS Grid
Прежде чем я услышу ворчание о необходимости поддержки IE и поэтому вы не можете использовать CSS Grid, я говорю, что вы легко можете использовать CSS Grid и запасной вариант для IE. Я покажу вам, как его создать в последнем разделе.
Одна из моих любимых вещей в CSS Grid (помимо единиц fr или свойства min-max) — это возможность перекрывать изображения, изменяя z-индексы, не извлекая ничего из обычного потока документов!
Сначала мы проанализируем этот компонент. Несколько вещей, на которые стоит обратить внимание:
Компонент будет работать независимо от высоты верхнего или нижнего изображения. (Это следует учитывать, когда у клиентов есть возможность загрузить любое изображение через CMS)
Верхнее изображение всегда будет слегка смещено вниз и будет выровнено по левому краю контейнера.
Структура HTML
<div class="image-stack"> <div class="image-stack__item image-stack__item--top"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/texture-waves2.jpeg" alt="A portrait of a girl under hanging flowers."> </div> <div class="image-stack__item image-stack__item--bottom"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/portrait-1-cropped.jpg" alt=""> </div> </div>
Совет по специальным возможностям: Если вы знаете, что изображение является декоративным изображением (например, изображением волн), и это не изменится, вы можете добавить ему role=»presentation», и оно не будет отображаться для программ чтения с экрана.
Одна вещь, которую мы должны принять во внимание — это ширина колонок сетки. Как упоминалось ранее, вы можете подойти к этому несколькими способами, но я собираюсь придерживаться использования 12 колонок, поскольку 12-столбцовые сетки используются довольно часто.
Чтобы сделать это, для родительского элемента, который содержит элементы, в CSS мы задаем:
.image-stack { display: grid; grid-template-columns: repeat(12, 1fr); position: relative; }
grid-template-columns — это свойство, которое определяет, сколько столбцов будет иметь сетка, а значение1fr задает, чтобы браузер вычислял доступное пространство. Это удобно, когда у вас есть пробелы в столбцах и строках.
position: relative здесь обязательно: это то, что позволяет z-index изображений работать как положено. Итак, теперь, когда у нас есть сетка, следующий шаг — просмотр ширины изображений:
Чтобы добавить ширину к каждому изображению на основе дизайна, я использую проценты. Поэтому давайте начнем с общей ширины компонента изображения 844px, которая равна 100%. Ширина верхнего изображения равна 521px. Я делю, 521px / 844px * 100, что составляет 61,7%, округляем до 62%, и вы получите число, которое находится точно в середине между 7/12 (58%) и 8/12 (66%)! Возьмем 66%.
Для верхнего изображения мы напишем в CSS следующее:
.image-stack__item--top { grid-column: 1 / span 8; grid-row: 1; // must be on the same row as the other image padding-top: 20%; // this pushes the image down, and keeps it proportional as it resizes z-index: 1; // make this image render on top of the bottom }
Для второго изображения мы рассчитаем (645px / 844) * 100 = 76.4%. Округлим до 75%, что идеально вписывается в нашу сетку из 12 столбцов — 9 / 12. Итак, чтобы сделать это, мы обеспечим, чтобы нижнее изображение охватывало 9 столбцов, начиналось с 4-й линии сетки и охватывало всю оставшуюся часть сетки, что и делает -1. Вы можете представить себе -1, как конец, если это поможет!
Нижнее изображение CSS будет выглядеть так:
.image-stack__item--bottom { grid-column: 4 / -1; grid-row: 1; // make this image be on the same row }
И вуаля! С помощью CSS-сетки и очень небольшого количества кода вы можете задать перекрытие всего, включая текст поверх изображений, текст поверх текста (о боже!), изображения поверх холста.
Метод 2: Floa с отрицательными полями
Ну а в случае, если вам нужно поддерживать IE, тогда этот раздел для вас. Этот метод требует тактики ole — «убрать элемент из потока документов», и мы будем делать это с помощью float!
Мой друг и менеджер Джейк Фентресс (Jake Fentress) предложил это решение, которое я применил к недавнему клиентскому проекту, поскольку нам нужно было поддерживать IE11.
Хорошей новостью является то, что структура меняется немного. Для image-stack родительского элемента мы добавим clearfix, так как мы перемещаем его дочерние элементы и нам нужно визуализировать содержимое ниже:
.image-stack::after { content: ' '; display: table; clear: both;
}
Тогда для верхнего изображения мы добавим:
.image-stack__item--top { float: left; width: 66%; margin-right: -100%; padding-top: 15%; // arbitrary position: relative; z-index: 1;
}
Отрицательная разница здесь обязательна. Отрицательные поля ДЕЙСТВИТЕЛЬНО странные. В зависимости от того, будет ли это отрицательное поле сверху или снизу, оно будет вести себя по-разному, если вы примените отрицательное поле слева и справа, и они будут работать по-разному для плавающих элементах.
Мы применяем отрицательное правое поле к плавающему левому элементу, что позволяет контенту перекрываться. -100% равно ширине контейнера, поэтому это сдвигает изображение влево и позволяет нижнему изображению отображаться под ним, как будто его нет в DOM.
Резервное решение (метод CSS Grid и Float)
В этом разделе я предоставлю вам лучшее из обоих миров, современный CSS для современных браузеров и запасной вариант для IE11.
Наиболее важной частью здесь является запрос функции @supports. Мы будем использовать его, чтобы проверить, поддерживает ли браузер значение display: grid. Сначала мы добавляем вариант для IE или резервный CSS, прежде чем добавить запрос функции @supports. После того, как мы добавим современный CSS, плавающие элементы больше не будут использоваться, так как в силу вступает сетка. В запросе функции поддержки мы сбросим ширину до 100%, и вы можете либо удалить свойство float, либо оставить его как есть, поскольку оно не влияет на элементы.
Вот последний код и пример, демонстрирующий именно это:
Я надеюсь, что эта статья была полезна для вас и осуществила ваши мечты! Будьте в порядке!
Источник: https://bricampgomez.com
Редакция: Команда webformyself.
