title: CSS absolute position inside a scrollable div in Bootstrap 4
body: <p>I'm trying to create a div which is scrollable with absolute positioned children inside. I want the absolute positioned elements to be visible even when the parent is scrolled. I know I need to set the parent element to position: relative to achieve this, but I'm using Bootstrap 4, and if I set the parent to relative, nothing changes.</p>
  
  <p><a href="https://jsfiddle.net/3adctabu/2/" rel="nofollow noreferrer">Here you can see the starting state, when the parent is scrollable.</a>
  Note the <strong>lines-scrollable</strong> class:</p>
  
  <pre><code>&lt;div id="opened" class="col-12 align-self-start lines lines-scrollable"&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/3adctabu/3/" rel="nofollow noreferrer">Here you can see the state when the overlay and the popup (absolute positioned children) are displayed.</a> Note the <strong>lines-non-scrollable</strong> class on their parent:</p>
  
  <pre><code>&lt;div id="opened" class="col-12 align-self-start lines lines-non-scrollable"&gt;
  </code></pre>
  
  <p>Everything is fine at this point because the scrolling position is 0:</p>
  
  <pre><code>$('#opened').scrollTop(0);
  </code></pre>
  
  <p><a href="https://jsfiddle.net/3adctabu/4/" rel="nofollow noreferrer">But if you scroll, the absolute positioned children are moving with the scrolled content out of the visible area too.</a> You can emulate the scrolling with:</p>
  
  <pre><code>$('#opened').scrollTop(100);
  </code></pre>