I'm attempting to create a scrollable div with absolute positioned children inside. My goal is to keep the absolute positioned elements visible even when the parent is scrolled. I am aware that I need to set the parent element to position: relative in order to achieve this, but I am using Bootstrap 4 and setting the parent to relative does not seem to make any difference.
You can check out the initial state here, where the parent is scrollable. Take note of the lines-scrollable class:
<div id="opened" class="col-12 align-self-start lines lines-scrollable">
Here you can see what happens when the overlay and popup (absolute positioned children) are shown. Notice the lines-non-scrollable class on their parent:
<div id="opened" class="col-12 align-self-start lines lines-non-scrollable">
Everything works perfectly up to this point because the scroll position is at 0:
$('#opened').scrollTop(0);
However, if you start scrolling, the absolute positioned children also move along with the scroll, going out of view. You can simulate scrolling by doing:
$('#opened').scrollTop(100);