html - 如何在可滚动的 div 元素内使用 CSS 绝对位置

Question

我有以下 HTML 内容。我在一个可滚动的 div 容器中有多个元素(例如，div，id = 一、二、三)。

在每个元素中，我需要使用 CSS 位置“绝对”，该位置与其父 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>
   <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

您必须在父 div 上设置 position: relative; 以使子元素相对于它移动。

实际情况是，您可以将父 div 设置为任何用户定义的位置，只要不使用默认的 static 位置即可。