position:absolute定位下动态元素无法跟随可滚动容器同步滚动的问题

absolute 定位元素无法跟随可滚动容器同步移动，本质是定位参照父级匹配错误：
当前代码中你只给新增的 div 设置了 position: absolute，但没有给承载它的父级 <li id="1"> 设置非 static 的定位属性。按照 CSS 定位规则，绝对定位元素会沿 DOM 树向上逐层查找最近的、设置了 relative/absolute/fixed/sticky 定位的祖先作为参照锚点。
因为你的 <li id="1"> 是默认的 static 定位，最终这个 absolute 元素会参照到最外层的文档根/视口元素，完全脱离了可滚动 <ul> 的渲染滚动层，自然不会跟随 <ul> 上下滚动。

你之前混淆了两种定位的适用场景，担心加 relative 会破坏布局的顾虑完全不成立：

• 给新增的动态 div 本身设置 position: relative：因为元素没有脱离文档流，自身 100px 的高度会占据布局空间，自然会推挤后续的 node2、node3，打乱原有尺寸，这是你遇到的布局问题来源
• 给包裹动态 div 的父级 <li id="1"> 设置 position: relative：relative 定位作用在普通块级元素上时，完全不会改变元素自身的盒模型尺寸、不会脱离文档流、不会对相邻元素的布局产生任何影响，唯一的作用就是为内部的 absolute 元素提供有效的定位参照坐标系

你之前代码里的注释存在认知偏差：只要保持动态 div 自身是 absolute 定位，仅给包裹它的父级 li 加 relative，就完全不会出现布局被打乱的问题。

不需要修改原有节点的布局，只需要两步调整，就能同时兼顾「不推挤原有元素」「跟随容器同步滚动」两个需求：

• 给作为锚点的父级 <li id="1"> 加上 position: relative 定位
• 保持新增动态元素的 position: absolute 设置不变

对应的修正后CSS代码：

li{
  padding: 50px;
}

/* 仅为锚点li增加relative，无布局副作用 */
#1 {
  position: relative;
}

ul{
  max-height: 200px;
  overflow-y: scroll;  
}

原有JS逻辑完全不需要改动，此时因为 absolute 元素的锚点是正常处于 <ul> 文档流内的 <li id="1">，滚动 <ul> 时，li 会带着内部的 absolute 元素同步移动，同时因为 absolute 元素不占文档流空间，node1 到 node3 的原有高度、相邻位置完全不会被挤占破坏。

内容的提问来源于stack exchange，提问作者JunM