Прокрутка элементов с position: absolute, как сделать, чтобы элементы absolute не уходили от основного элемента?

Question

[userome]

Всем привет! У меня возникла проблема на проекте, с которой я никак не могу попрощаться.
У меня при скролле position: absolute объекты стоят на том месте, где было когда-то начало скролла. Если начать скроллить, они будут внизу и никак их оттуда не вытащить.

Видел, как человек написал position: relative сделать под overflow-y: scroll, но мне это не подходит, так как у меня проблема с наложением тогда появляется.
- это как должно выглядеть, как выглядят первые элементы скролла.
- немного проскроллил.
- это у меня появляется, когда я делаю position: relative сделать под overflow-y: scroll.
Родительский элемент имеет overflow-y: scroll. Дочерний имеет position: absolute.
Как я понимаю, высота считывается от самого окна и когда я добавил position: relative, то высота начала считаться от элемента .scroll, но можно ли сделать по-другому?
Надеюсь, это как-то решается css.

Код - https://codesandbox.io/s/practical-kilby-xcvmzc?fi...

Comments

[ProjectSoft]

На CSS абсолютная позиция считается от родительского relative.
Это правило из азов CSS.

Видел, как человек написал position: relative сделать под overflow-y: scroll, но мне это не подходит, так как у меня проблема с наложением тогда появляется.

Значит вы что-то делаете не правильно, либо решение должно быть другим, но отталкиваться от правил.
Без разумного кода никто вам не поможет.
Выкладывайте свой код (именно то, что у вас получилось, рабочее) на codepen.io . Посмотрим.

[userome]

ProjectSoft, спасибо, что откликнулись помочь, к сожалению, на codepen io переносить свой проект было бы трудно, так как писал на react, сделал на codesandbox плохую копию проекта, но css там есть и код тоже, так что разобраться можно - https://codesandbox.io/s/practical-kilby-xcvmzc?fi...

[userome]

Короче, как я понял проблема заложена в overflow-y. Дело в том, что дочерние элементы с position: absolute при родительском overflow-y: scroll и position: relative уходят по оси x и y вниз и вправо и до них можно доскроллить. Когда я убираю overflow-y: scroll все встает на свои места, но скролла нет. Когда я убираю position: relative, тоже все встает на свои места, но дочерние элементы absolute уезжают. Если даже попробовать сделать display: table, то оже все встает на свои места, но скролл не работает с таким дисплеем) Как я понимаю, тут нет решения)