Для осуществления прокрутки элементов с position: absolute и предотвращения их выхода за пределы родительского элемента, можно использовать CSS свойство overflow. Значение этого свойства может быть установлено как auto или scroll для родительского элемента, чтобы создать полосы прокрутки при необходимости.
Вот пример:
HTML:
```
<div class="parent">
<div class="child">Элемент 1</div>
<div class="child">Элемент 2</div>
<div class="child">Элемент 3</div>
<div class="child">Элемент 4</div>
<div class="child">Элемент 5</div>
</div>
```
CSS:
```
.parent {
width: 200px;
height: 200px;
position: relative;
overflow: auto;
}
.child {
position: absolute;
width: 100%;
height: 50px;
background-color: gray;
color: white;
padding: 10px;
}
.child:nth-child(1) {
top: 0;
}
.child:nth-child(2) {
top: 60px;
}
.child:nth-child(3) {
top: 120px;
}
.child:nth-child(4) {
top: 180px;
}
.child:nth-child(5) {
top: 240px;
}
```
В этом примере мы создаем родительский элемент с классом "parent", который имеет фиксированный размер и позицию relative. Затем мы добавляем несколько дочерних элементов с классом "child" и устанавливаем их позицию абсолютной.
Основной момент здесь - это свойство overflow у родительского элемента. Если вы зададите здесь значение auto или scroll, то когда дочерние элементы исходят за пределы родительского элемента, будут автоматически созданы полосы прокрутки.
Теперь, когда дочерние элементы прокручиваются, они не выходят за пределы родительского элемента и остаются видимыми только в его рамках.
Чтобы исправить проблему с позиционированием элементов при скроллинге с использованием CSS, следует удостовериться, что родительский элемент имеет корректные размеры и положение (например, используя свойства width, height и position), а дочерние элементы имеют корректные свойства позиционирования (например, top, left, right, bottom). Если все свойства установлены правильно, элементы должны позиционироваться и оставаться на своих местах при скроллинге.
