如何在可滚动的 div 元素中使用 CSS 绝对位置答案

【问题标题】：How to use CSS absolute position inside a scrollable div element如何在可滚动的 div 元素中使用 CSS 绝对位置
【发布时间】：2016-09-25 01:55:27
【问题描述】：

我有以下 html。我在一个可滚动的 div 容器中有多个元素（例如 id = 一、二、三的 div）。

在每个元素中，我需要使用 css position '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>

【问题讨论】：

将父 div 或多个 div 设置为 position: relative;，position: absolute; 的子 div 将被放置 相对于其父元素的位置。
就像@TylerH 说的，你必须在你希望他们锚定的父级上指定position: relative。绝对定位的元素将相对于最近的相对定位的父元素定位，但div 元素默认具有position: static。

标签： html css css-position

【解决方案1】：

在要浮动的 div 上尝试position: sticky。还要注意浏览器支持对于sticky https://caniuse.com/#feat=css-sticky来说不是很好

【讨论】：

【解决方案2】：

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

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

【讨论】：

那太好了。您是否碰巧知道如何做相反的事情..它很疯狂，但我有一个相对父级设置了高度和可滚动的内容...一个子元素是绝对的，但是当滚动时..它与内容一起，就好像它是真实的那个..但它不是......它是可滚动内容的直接兄弟
@carinlynchin 您需要在可滚动 div 的顶部添加另一个具有相对位置的 div。不要混合位置相对和溢出。