如何在dom节点上使用fixed定位？实现基于父节点而不是浏览器的滚动定位？一眼看懂，简单明了。

文章介绍了如何在DOM节点内部实现元素滚动时的定位，主要探讨了两种方法：一是使用父相子绝的CSS布局来避免fixed基于窗口的问题；二是通过iframe实现fixed定位，将DOM节点作为一个独立窗口。第一种方法更推荐，而iframe方案在某些特定场景下适用。

文章目录

一、想要实现的功能场景

想在一个node节点中实现滚动，但是我的文本要基于这个元素在滚动的时候浮起，类似于如下的功能
在这里插入图片描述
那么我们首先想到的必然是fixed固定定位，但是我们不得不考虑的一个问题就是，fixed是基于窗口来进行定位，无法做到类似于父相子绝的定位方式，因为fixed定位的就不是父dom节点，所以我们暂时先不用去考虑使用fixed方式定位。

二、父相子绝方式实现dom节点内元素滚动定位

其实我们如果不考虑使用fixed方式去实现dom内元素的滚动定位的话，其实还是很好实现这个功能的，只是走进了一个误区，有没有什么好的css属性可以实现此功能，然后不自觉的就钻进了牛角尖。
实现步骤：

1、给需要滚动的元素包裹一个父元素，然后定义为指定的宽高
2、层级为 <父><滚动元素></滚动元素><Fixed元素></Fixed元素></父>
3、采用父相子绝的方式将Fixed元素进行浮起，然后定位，给滚动元素设置滚动互不干扰，功能实现

2.1、父相子绝代码

  <!-- 父相子绝方式，构建一个新的父元素，父元素高度为本身的滚动元素高度，并且设置相对定位 -->
  <div style='position:relative;height:300px;'>
    <!-- 本身需要固定的父元素，现在为滚动元素，原有高度为300px,调整为100%高度；并设定overflow滚动 -->
    <div style="height:100%;overflow:auto;">
      <!-- 内容 -->
      <div style="height:800px;background:green;