Как использовать абсолютное положение CSS внутри прокручиваемого элемента div

Question

У меня есть следующий html. У меня есть несколько элементов (например, div с id = один, два, три) внутри контейнера div, который прокручивается.

В каждом элементе мне нужно использовать положение css 'absolute', положение которого связано с его родительским div (то есть class = 'Anchor').

Проблема, с которой я сталкиваюсь, когда я просматриваю внешний контейнер, ни один из div с абсолютным положением не перемещается. Я понимаю, что позиция «абсолютная» - это позиционирование, относительная на ее родительский элемент DIV. Не могли бы вы рассказать мне, как я могу сделать эту «абсолютную» позицию перемещенной, когда я просматриваю внешний контейнер?

<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 class="Anchor" id="two"> 
      <div style="position: absolute"> something </div> 
      <div style="position: absolute"> something else </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

Вы должны установить position: relative; на родительский DIV, чтобы получить дочерние элементы для перемещения по отношению к нему.

Реальность заключается в том, что родительский div можно установить в любое пользовательское положение, если по умолчанию используется значение static.