Как верстать современный дизайн?

Question

[Pan_Stephan]

всем привет, не подскажете, как грамотно верстать вот такого рода элементы

Comments

[Rustam Bainazarov]

Так же, как и все года до этого — position: absolute.

[Pan_Stephan]

Рустам Байназаров, не люблю я абсолютно позиционировать, я вот думал, нет ли какой-то новой фичи для этого, не верстал давно :)

[Rustam Bainazarov]

Pan_Stephan, нет, другой нет. Просто надо к этому делу с умом подходить:



Полностью адаптивно, подстраивается под размеры контента, ни на что не налезает.

[Pan_Stephan]

Рустам Байназаров, я пробовал с помощью box-shadow реализовать это), но получается как-то очень костыльно

[Pan_Stephan]

Рустам Байназаров, спасибо

[Rustam Bainazarov]

Pan_Stephan, обновил пример. Добавил второй тип с другим позиционированием.

[Andrew]

Pan_Stephan, современный дизайн? Элементы, которые непонятно относительно чего позиционированы и непонятно какого размера(зависимость). Современный!=="ЙА ДИЗАЙНИР СДЕЛЯЛЬ ТАК КРАСИВО"
Надеюсь, такие "современные" уйдут в века

[Pan_Stephan]

Andrew, и я на это надеюсь, но на данный момент - это реальность)

Answer 1

[Rustam Bainazarov]

Старые-добрые position: absolute, position: relative и z-index. Их бояться не нужно, просто нужно грамотно использовать в тандеме с теми элементами, что в потоке вёрстки.

Полностью адаптивно, подстраивается под размеры контента, ни на что не налезает (ограничение по ширине элементов исключительно для примера, а красная рамка — чтобы показать реальные размеры блока):