Чтобы элементы с position: absolute не уходили от основного элемента при прокрутке, можно использовать свойство overflow: auto или overflow: scroll для контейнера, в котором расположены эти элементы.
Для начала, убедитесь, что основной элемент, в котором находятся элементы с position: absolute, имеет определенную высоту и ширину. Это можно сделать с помощью задания значений для свойств height и width.
Затем, оберните содержимое основного элемента в контейнер и задайте ему следующие свойства CSS:
.container {
position: relative; /* Указываем относительное позиционирование, чтобы потом использовать absolute */
height: 300px; /* Задаем высоту контейнера */
width: 500px; /* Задаем ширину контейнера */
overflow: auto; /* Добавляем прокрутку при необходимости */
}
Далее, для каждого элемента с position: absolute, нужно задать свойства CSS, указывающие на его позиционирование внутри контейнера:
.absolute-element {
position: absolute; /* Указываем абсолютное позиционирование */
top: 50px; /* Задаем вертикальное расположение элемента */
left: 50px; /* Задаем горизонтальное расположение элемента */
}
Теперь, когда элементы с position: absolute находятся в контейнере с position: relative и с заданными размерами, а также когда контейнер имеет свойство overflow: auto или overflow: scroll, элементы будут прокручиваться внутри контейнера, а не уходить за его пределы.
Дополнительно, можно также настроить другие свойства CSS, чтобы достичь желаемого эффекта. Например, использовать z-index для указания порядка слоев элементов, или задать размеры и позицию для каждого элемента с position: absolute более точно.
Надеюсь, эта информация поможет вам достичь желаемого эффекта и удержать элементы с position: absolute внутри основного элемента при прокрутке.