How to use CSS absolute position inside a scrollable div element

Question

I have the following html. I have multiple elements (e.g div with id = one, two, three) inside a div container which is scrollable.

In each element, I need to use css position 'absolute' which position related to its parent div (i.e. class='Anchor').

The problem I am having is, when I scroll the outer container, none of the div with absolute position moved. My understand is position 'absolute' is it is positioned relatieve to its parent DIV element. Can you please tell me how can I make those 'absolute' position moved as I scroll the outer container?

<div style="overflow-y: scroll">
   <div> 
      <div class="Anchor" id="one">
           <div style="position: absolute"> something </div>
           <div style="position: absolute"> something else </div>
      </div>
   </div>
   <div> 
      <div class="Anchor" id="two">
           <div style="position: absolute"> something </div>
           <div style="position: absolute"> something else </div>
      </div>
   </div>
   <div> 
      <div class="Anchor" id="three">
           <div style="position: absolute"> something </div>
           <div style="position: absolute"> something else </div>
      </div>
   </div>
</div>

Answer 1

You must set position: relative; on the parent div to get the child elements to move in relation to it.

The reality is, you can have the parent div set to any user-defined position, as long as the default static position isn't being used.

Answer 2

try position: sticky on the div that you want to make float. also beware the browser support is not that great for sticky https://caniuse.com/#feat=css-sticky