Абсолютная позиция CSS внутри прокручиваемого div в Bootstrap 4

Question

Я пытаюсь создать div, который можно прокручивать внутри детей с абсолютным позиционированием. Я хочу, чтобы элементы с абсолютным позиционированием были видны даже при прокрутке родительского элемента. Я знаю, что мне нужно установить родительский элемент в положение: относительно, чтобы добиться этого, но я использую Bootstrap 4, и если я устанавливаю родительский элемент в относительный, ничего не изменится.

Здесь вы можете увидеть начальное состояние, когда родитель прокручивается. Обратите внимание на строки с прокруткой класс:

<div id="opened" class="col-12 align-self-start lines lines-scrollable">

Здесь вы можете видеть состояние, когда отображаются оверлей и всплывающее окно (дочерние элементы с абсолютным позиционированием). Обратите внимание на класс не прокручиваемый в строках на родительском элементе:

<div id="opened" class="col-12 align-self-start lines lines-non-scrollable">

В этот момент все в порядке, поскольку позиция прокрутки равна 0:

$('#opened').scrollTop(0);

Но если вы прокручиваете, потомки с абсолютным позиционированием перемещаются с прокручиваемым контентом и из видимой области. Вы можете эмулировать прокрутку с помощью:

$('#opened').scrollTop(100);

Answer 1

Когда вы устанавливаете что-то как абсолютное, вы помещаете его в местоположение относительно контейнера (ближайший контейнер с положением абсолютное или относительное ...). Но когда вы прокручиваете вниз, позиция 0 повышается, поэтому вы видите это поведение.

Другими словами, когда вы прокручиваете div, относительное местоположение 0 также изменяется, поэтому внутренний абсолютный div также прокручивается вверх.

У вас есть два варианта:

1. Элемент списка устанавливает фиксированную позицию, однако это делает ее относительной к странице (поэтому она фиксируется с позицией top: 0; ВСЕГДА будет вверху страницы независимо от того, где она находится в html

OR

2. Переместите внутренний абсолютный div на один уровень вверх и сделайте контейнер относительным, чтобы ваш HTML выглядел примерно так:

https://jsfiddle.net/3adctabu/6/ - рабочий пример jsfiddle, который вы предоставили для 2-го optin.

<div class="outer-container-that-is-relative">
  <div class="inner-absolute"></div>
  <div class="scrollable-content"></div>
</div>