Как правильно сделать наложение блоков друг на друга?

Question

[Evgeniy]

Всем добрый день

У ВБ есть страница https://career.wb.ru/pick-up-point
Там при кроле блоки накладываются друг на друга, т.к. имеют

position: sticky; 
top: 10px;
/* свойство top увеличивается на 10px для каждого следующего блока. */

Так создаётся эффект некой лесенки, ступенек..

Выглядит довольно примитивно
Но в песочнице воссоздать не получается



Проблема в том
Что когда скролл доходит на последних блоков


Последние блоки вдруг сильно накладываются на предыдущие


или так


на ВБ у родительских блоков каких-то доп.стилей нет
вроде ничего такого не прописано..
У меня тоже всё минимально..

Почему так происходит?

Поиграть в песочнице: https://codepen.io/eugene_zh/pen/ZYzYdba

UPD:
Хотя если шапку на ВБ убрать, у них такой же касяк))


Но в любом случае это не красиво, как исправить?

Answer 1

[Ivan Ustûžanin]

.blocks__list {
   max-width: 700px;
   width: 100%;
   margin: auto;  
   margin-bottom: 100px;
+  display: grid;
+  gap: 50px;
 }
 .block__item { 
   border: 1px solid;
   color: white;
   padding: 45px 25px;
   border-radius: 25px;
   height: 300px;
   
-  &:not(:last-child) {
-    margin-bottom: 50px;
-  }

Comments

[Evgeniy]

Ну более менее конечно, проверил в песочнице и на ПК.
Складываются ровно, но на последних элементах всё же последний блок перекрывает 2 предыдущих



может высоты родительского блока не хватает, или чего-то ещё..

[Ivan Ustûžanin]

Evgeniy, так работает sticky, последний блок будет как бы накрывать собой все остальные и оно всё скопом после сбора этой «гармошки» будет уезжать из вьюпорта

если хотите, чтобы оно уезжало за вьюпорт без сбора в один блок, то каждый последующий блок должен иметь высоту на те же 10 пикселей меньше

[Evgeniy]

На сайте https://litebox.ai/ есть похожая реализация на реакте с использованием nextui .. там блоки 01 Design, 02 Code, 03 Synergy складываются чётко, но видимо тут что-то гораздо сложнее..
Но спасибо

[Ivan Ustûžanin]

Evgeniy, там применён другой трюк:
у всех sticky-элементов top установлен в 0, а смещаются они с помощью увеличивающегося для каждого элемента transform: translateY()
поскольку элементы после трансформации не влияют на своё окружение, нужно обеспечить достаточно места для всех смещённых таким образом элементов после border-box контейнера
но за счёт использования трансформации высота у блоков может быть одинаковая и они пойдут за вьюпорт все скопом без сбора в один блок