No more absolute for overlapping
Спасибо Wes Bos за примеры, как можно обойтись без position: absolute для накладывающихся друг на друга элементов: tweet 1 и tweet 2. Я применила этот вариант уже раза 3 в текущем проекте, переверстывая старые элементы, и насколько же лучше это выглядит 😊
За подробностями — в твиттер Wes Bos, у него там видео с примерами, или на css-trics.
Я фанат именованных grid-area, поэтому мой любимый подход: родительский компонент превращаем в grid и задаем grid-template-areas: 'stack'.
Компонентам-детям, которые должны накладываться, задаём grid-area: stack.
(имя grid-area может быть любым, главное, чтобы было одинаковым у тех элементов, над которыми колдуем)
Либо можно не задавать именованную grid-area, а просто указать для нужных элементов одинаковые grid-row-start и grid-column-start.
Вот так:
.container > * { grid-area: 1 / 1;}