Тёмный

CSS: наложение элементов с помощью display: grid  

PurpleSchool | Anton Larichev
Подписаться 41 тыс.
Просмотров 16 тыс.
50% 1

Посмотрим как можно наложить элементы друг на друга с помощью css display: grid.
Курсы по HTML и CSS: purpleschool.ru/
#css #css3 #shorts

Опубликовано:

 

18 апр 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 26   
@PurpleSchool
@PurpleSchool Месяц назад
Курс по HTML и CSS: purpleschool.ru/
@XAH30
@XAH30 15 дней назад
А в правом нижнем углу с отступами в 4% снизу и 6% справа как сделать? :) За фичу спасибо - знания лишними не бывают, может когда-то пригодится на тестовом задании выпендрится. Но в коммерческой разработке такое будет использоваться примерно никогда.
@truedivan
@truedivan Месяц назад
Интересно, спасибо🎉
@PurpleSchool
@PurpleSchool Месяц назад
Пожалуйста
@Vladimier1000
@Vladimier1000 Месяц назад
Можно ещё через бэкграунд имэйдж
@PurpleSchool
@PurpleSchool Месяц назад
Если нужно только изображение, то да, но таким способом можно наложить любой элемент друг на друга.
@vladprodan7010
@vladprodan7010 Месяц назад
place-items:center
@PurpleSchool
@PurpleSchool Месяц назад
Да, можно и так
@mapclunatik1921
@mapclunatik1921 Месяц назад
@@PurpleSchoolТолько так и проще
@alexgrinberg1888
@alexgrinberg1888 Месяц назад
Наверное можно также это сделать при помощи flexbox
@PurpleSchool
@PurpleSchool Месяц назад
Во flexbox мы не сможем заставить один элемент быть поверх другого без вызывания из потока через position
@user-ro7mi7dx9u
@user-ro7mi7dx9u Месяц назад
А background image чем плох?
@PurpleSchool
@PurpleSchool Месяц назад
Таким способом ты можешь не только изображения накладывать друг на друга
@uszakow
@uszakow Месяц назад
Background-image всем хорош, когда надо изображение сделать фоном. В данном случае фона нет - элемент изображения является не фоном, а основой конструкции. Размер элемента с классом .wrapper должен подстроиться под размер изображения. Так понимаю, что предлагается убрать элемент img, а картинку передать во wrapper как фон. И откуда в таком случае мы возьмем размеры для wrapper?
@user-zp8cw7di6n
@user-zp8cw7di6n Месяц назад
Если имейдж с БД приходит, как его пихать в бекграунд имейдж?)
@PurpleSchool
@PurpleSchool Месяц назад
@@user-zp8cw7di6n можно через style, но описанной техникой можно не только изображения так накладывать
@ilyawebdev
@ilyawebdev Месяц назад
Если это контентное изображение, то его в бэкграунд пихать нежелательно, оно не проиндексируется. В бэкграунд кладут только декоративные изображения.
@bidlo_menetil
@bidlo_menetil Месяц назад
в чем плюс данного подхода?
@PurpleSchool
@PurpleSchool Месяц назад
Не нужно вытаскивать из потока как с absolute
@user-wn9rd8vh1p
@user-wn9rd8vh1p Месяц назад
У тебя будет нормальная адаптация
@tangiro5340
@tangiro5340 26 дней назад
Прикольный способ, но использовать не буду) а так спасибо очень познавательно.
@PurpleSchool
@PurpleSchool 25 дней назад
Пожалуйста)
@tackesi
@tackesi Месяц назад
Этим и плох CSS, что одно и тоже можно сделать уже не 3, а 5 разными способами. Брр, потом начинается какой-то кавардак, особенно в долгоживущем легаси
@stolz999
@stolz999 21 день назад
Вы просто не умеете его готовить
Далее
ATEEZ(에이티즈) - 'WORK' Official MV
03:15
Просмотров 11 млн
How I Did The Mcdonalds Drink Trick 🤯🥤#shorts
00:16
шаблоны CapCut - где искать? #shorts
0:33
CSS: Как центрировать div? #css #css3
0:52
ATEEZ(에이티즈) - 'WORK' Official MV
03:15
Просмотров 11 млн