绝对定位元素滚动时无法固定在页面底部问题排查

你的问题核心是定位方式用错了，跟iframe关系不大，主要原因：

• 用position:absolute时，元素是相对于设置了position:relative的父元素（这里是body）定位的，当body滚动时，元素会跟着body的内容一起移动——因为它绑定的是body的初始位置，而非浏览器视口。
• 加上body设置了overflow:auto，滚动的是body内部区域，absolute元素自然会跟着滚动内容上移。

修正方案 #

直接把包裹iframe的div定位改成fixed，它是相对于浏览器视口固定的，不管页面怎么滚动都会保持在右下角：

<html>
   <body style="overflow: auto">
      <!-- 改成position:fixed，增加z-index防止被其他元素遮挡 -->
      <div style="position: fixed; bottom: 0; right: 0; z-index: 999;">
         <iframe>***dynamically loaded button***</iframe>
      </div>
   </body>
</html>

额外排查点（Angular特有的坑） #

如果改了fixed还是不行，检查这两个地方：

• 检查Angular根组件（一般是<app-root>）的CSS有没有设置transform、perspective或filter属性，这些属性会让内部的fixed元素相对于这个组件定位，而非视口，需要去掉这类样式。
• 确认没有其他父容器（比如路由出口、布局容器）设置了类似的定位上下文干扰，确保fixed元素的直接父级没有改变定位规则。

内容的提问来源于stack exchange，提问作者Web Develop Wolf