How to use CSS absolute position inside a scrollable div element

Question

I have the following HTML content. 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 divs with an absolute position moved. My understanding of position 'absolute' is it is positioned relative to its parent DIV element. How can I make those 'absolute' position move 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>

Doorknob

Set the parent div or divs to position: relative; and the child divs that are position: absolute; will be placed relative to the position of their parent elements. – Tombstone

Like @Tombstone said, You have to specify position: relative on the parent that you want them to anchor to. Absolutely positioned elements will be positioned relative to the nearest relatively positioned parent, but div elements have position: static by default. – Nepali

The HTML content is invalid. There are 13 <div>s and 9 </div>s. A validator, like the W3 one, can check it. The result (when wrapped in an HTML document to reduce spurious errors) is "Error: End tag for body seen, but there were unclosed elements." and four times "Unclosed element div." (the former is a result of the latter). – Crawley

The result without wrapping. It includes the five error results. – Crawley

(A moderation action on this question is the subject of a meta question.) – Crawley

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.

Submerse

that is great. Do you happen to know how to do the opposite.. its crazy but i have a relative parent with height set and scrollable contents...one child element is absolute but when scrolling ..it goes with the contents as if it was realtive to that.. but its not... its a direct sibling of the scrollable contents – Intoxicating

@Intoxicating you need to add another div with position relative on top of scrollable div. don't mix position relative and overflow. – Capriccioso

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.

Capriccioso