Тёмный

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

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

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

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

 

18 апр 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 26   
@PurpleSchool
@PurpleSchool 27 дней назад
Курс по HTML и CSS: purpleschool.ru/
@truedivan
@truedivan 27 дней назад
Интересно, спасибо🎉
@PurpleSchool
@PurpleSchool 27 дней назад
Пожалуйста
@XAH30
@XAH30 12 часов назад
А в правом нижнем углу с отступами в 4% снизу и 6% справа как сделать? :) За фичу спасибо - знания лишними не бывают, может когда-то пригодится на тестовом задании выпендрится. Но в коммерческой разработке такое будет использоваться примерно никогда.
@Vladimier1000
@Vladimier1000 24 дня назад
Можно ещё через бэкграунд имэйдж
@PurpleSchool
@PurpleSchool 24 дня назад
Если нужно только изображение, то да, но таким способом можно наложить любой элемент друг на друга.
@vladprodan7010
@vladprodan7010 27 дней назад
place-items:center
@PurpleSchool
@PurpleSchool 27 дней назад
Да, можно и так
@mapclunatik1921
@mapclunatik1921 27 дней назад
@@PurpleSchoolТолько так и проще
@tangiro5340
@tangiro5340 10 дней назад
Прикольный способ, но использовать не буду) а так спасибо очень познавательно.
@PurpleSchool
@PurpleSchool 10 дней назад
Пожалуйста)
@alexgrinberg1888
@alexgrinberg1888 24 дня назад
Наверное можно также это сделать при помощи flexbox
@PurpleSchool
@PurpleSchool 24 дня назад
Во flexbox мы не сможем заставить один элемент быть поверх другого без вызывания из потока через position
@bidlo_menetil
@bidlo_menetil 27 дней назад
в чем плюс данного подхода?
@PurpleSchool
@PurpleSchool 27 дней назад
Не нужно вытаскивать из потока как с absolute
@user-wn9rd8vh1p
@user-wn9rd8vh1p 22 дня назад
У тебя будет нормальная адаптация
@user-ro7mi7dx9u
@user-ro7mi7dx9u 27 дней назад
А background image чем плох?
@PurpleSchool
@PurpleSchool 27 дней назад
Таким способом ты можешь не только изображения накладывать друг на друга
@uszakow
@uszakow 27 дней назад
Background-image всем хорош, когда надо изображение сделать фоном. В данном случае фона нет - элемент изображения является не фоном, а основой конструкции. Размер элемента с классом .wrapper должен подстроиться под размер изображения. Так понимаю, что предлагается убрать элемент img, а картинку передать во wrapper как фон. И откуда в таком случае мы возьмем размеры для wrapper?
@user-zp8cw7di6n
@user-zp8cw7di6n 26 дней назад
Если имейдж с БД приходит, как его пихать в бекграунд имейдж?)
@PurpleSchool
@PurpleSchool 26 дней назад
@@user-zp8cw7di6n можно через style, но описанной техникой можно не только изображения так накладывать
@ilyawebdev
@ilyawebdev 26 дней назад
Если это контентное изображение, то его в бэкграунд пихать нежелательно, оно не проиндексируется. В бэкграунд кладут только декоративные изображения.
@tackesi
@tackesi 26 дней назад
Этим и плох CSS, что одно и тоже можно сделать уже не 3, а 5 разными способами. Брр, потом начинается какой-то кавардак, особенно в долгоживущем легаси
@stolz999
@stolz999 6 дней назад
Вы просто не умеете его готовить
Далее
FOUND MONEY 😱 #shorts
00:31
Просмотров 1,7 млн
Идеальное рабочее место дома
20:21
JavaScript: fetch abort timeout signal #javascript
0:55