absolute元素随父容器滚动是css规范行为，因其定位基准为最近非static定位祖先；若该祖先设overflow:scroll/auto，则滚动时containing block可视范围移动，导致absolute元素跟随移动。

为什么 absolute 元素会跟着父容器滚动

这不是 bug，是 CSS 规范明确的行为：position: absolute 的定位基准（containing block）是最近的非 static 定位祖先。如果这个祖先设置了 overflow: scroll 或 auto，那么它的内容区滚动时，整个 containing block 的可视范围就移动了——absolute 元素自然跟着“动”。

常见现象：弹窗、下拉菜单、日期控件图标在可滚动区域里一滚动就消失或错位；DevTools 里看到元素 top: 0 却飘到视口中间。

• 检查该 absolute 元素的 offsetParent（Computed 面板里找），确认它是不是你预期的那个父容器
• 如果 offsetParent 是 #overflowTest 这类有 overflow 的容器，那它“跟滚”就是必然结果
• 特别注意：表格单元格（<td>）、Flex 容器子项、自动修正后的 DOM 结构，都可能让本该是定位锚点的父级“失效” <h3>怎么把定位锚点抬升到不滚动的层级</h3> <p>最直接的办法是让 <code>absolute 元素换一个更靠上的定位上下文，避开滚动容器的影响。
  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载
  • 把 position: relative 从滚动容器上移走，加到更高层（比如 或某个固定高度的 wrapper）
  • 确保这个新锚点本身没有 overflow，也不在任何 transform 或 clip-path 容器内（否则可能触发新的 containing block）
  • 改完后，top/left 值要重新计算——现在是相对于新锚点，不是原父容器
  • 加 z-index 控制层叠，避免被其他内容遮挡；必要时用 contain: layout 防止重排扩散

  不想改结构？试试 fixed + JS 动态同步

  当无法调整 HTML 层级或 CSS 锚点时，用 position: fixed 替代 absolute，再用 JS 把它“钉”在视觉上原位置——适合弹窗、Tooltip 等需要脱离滚动影响的场景。

  • 先用 element.getBoundingClientRect() 获取元素当前视口坐标（不是 offsetTop！后者依赖 offsetParent）
  • 监听滚动事件，在 fixed 元素上设 style.left 和 style.top 为上述坐标
  • 注意节流（requestAnimationFrame 比 debounce 更稳），否则滚动卡顿
  • 滚动停止后，若需恢复 absolute，得手动还原样式并清除监听器

  容易被忽略的兼容性陷阱

  移动端 Safari 和旧版 Chrome 对 containing block 的判定更严格，尤其遇到 transform、will-change 或 overflow: hidden 的父级时，absolute 可能意外被截断或偏移。

  • 不要在滚动容器上同时设 transform: translateZ(0) 和 overflow: scroll——这会让某些浏览器把 containing block 切换为 transform 容器
  • fixed 元素在 iOS 上可能随键盘弹出而错位，加 viewport meta 的 height=device-height 不够，得监听 resize 补正
  • 嵌套表格中，<td> 默认不是定位上下文，想让它当锚点必须显式加 <code>position: relative，且不能有 display: table-cell 冲突

    真正卡住人的往往不是“怎么写”，而是 DevTools 里看到的 DOM 结构和你写的 HTML 不一样——先看 Elements 面板里的真实树，再调样式。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！