Как спозиционировать карточку без абсолютного позиционирования?

Question

[Клим Куликов]

Я новичок и не очень понимаю, как не использовать абсолютное позиционирование? Не хочу его использовать потому что таких карточек много и не хочу для каждой выравнивать всё по пикселям

Comments

[Ankhena]

Гридами очень удобно.

[Клим Куликов]

Ankhena, а как именно? Можно хотяб набросок?

[Ankhena]

Иван Куликов, пройдите игру про гриды https://cssgridgarden.com/#ru
Она на полчаса.
После этого сделаете самостоятельно.

Если что-то не получится, сотворите песочницу на codepen.io и позовите.

Answer 1

[Алексей Гончаров]

Можно попробовать через display flex, это зависит от того что именно вам нужно

Comments

[Клим Куликов]

по макету есть лейбл "Популярное" и текст "Patec..." их нужно расположить на картинке

[Алексей Гончаров]

Иван Куликов, у меня другой принцип работы. Я помещаю текст "patec" в контейнер "популярное". И делаю контейнер популярное display flex и выравниваю с помощью justify content или align items

[Ankhena]

Алексей Гончаров, флекс не умеет накладывать одни элементы поверх других.

[Алексей Гончаров]

Ankhena, зачем их через css накладывать если можно просто в html вложить те элементы в контейнер которые необходимы

[Ankhena]

Алексей Гончаров, ок. А теперь разместите их поверх контентной картинки.
Покажите, пожалуйста, как это сделать в песочнице codepen.io или аналоге.

[Алексей Гончаров]

Ankhena, хмм вы правы, но почему то когда я верстал я не встречался с такой проблемой. Можно ещё попробовать, задать контейнеру изображение через background-image, и внутри контейнера текст и выровнять этот текст с помощью флекс

[Ankhena]

Алексей Гончаров, я ещё раз повторю: картинки товаров в каталоге - контентные, вставляются через img.
Это не украшение, не фон, не псевдоэлемент и т.д.

[Алексей Гончаров]

Ankhena, https://codepen.io/asd123asd1/pen/WNMmoWm
Можно и так. Я один раз делал контент через фон. Так кода меньше и понятнее

[Ankhena]

Алексей Гончаров,

Я один раз делал контент через фон. Так кода меньше и понятнее

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

[Алексей Гончаров]

Ankhena, спасибо

Answer 2

[Ankhena]

Гридами
https://codepen.io/AnnaSummer/pen/abqQEog