如何调整iframe位置，使其正常布局并置于标题下方？

你的核心问题是绝对定位的iframe脱离了文档流，所以它不会跟着<h1>、<br>这些普通元素走，而且当前iframe的top: -620px是相对于整个页面定位，自然跑到顶部。另外你之前给父div设position: static（默认值），所以absolute定位不会参考这个父容器，导致relative没生效。下面给你两种可行方案：

方案1：让iframe回到正常文档流（推荐，符合你要响应<br>的需求） #

直接去掉iframe的绝对定位属性，用容器裁剪内容，这样它就会像普通元素一样跟着<h1>排列，还能响应<br>标签。

修改后的代码：

<br><br><br>
<h1>Hello</h1>
<!-- 用容器裁剪iframe的可见区域 -->
<div style="width: 66%; margin: 0 auto; overflow: hidden; height: 2230px;">
  <iframe src="https://www.liveworksheets.com/ik1904958nl"
          style="width: 100%; height: auto; margin-top: -620px; border: none;" scrolling="no"></iframe>
</div>

• 父容器设overflow: hidden，用来裁剪iframe的顶部内容；
• iframe去掉position: absolute、top、left，用margin-top: -620px来向上偏移内容，实现只展示部分区域；
• 父容器用margin: 0 auto实现居中，替代无效的align: center；
• 现在iframe会跟着<h1>走，加<br>也能调整间距。

方案2：保留绝对定位但修正父容器定位 #

如果你一定要用绝对定位，必须让父容器成为iframe的定位参考，同时父容器留在文档流里：

修改后的代码：

<br><br><br>
<h1>Hello</h1>
<div style="position: relative; width: 100%; margin-top: 20px;">
  <iframe src="https://www.liveworksheets.com/ik1904958nl"
          style="position: absolute; top: -620px; left: 17%; width: 66%; height: 2230px;" scrolling="no"></iframe>
</div>

• 父容器设position: relative，这样iframe的绝对定位会参考这个div，而不是整个页面；
• 父容器的margin-top可以调整和<h1>之间的间距；
• 把iframe的left: 250px改成百分比（比如17%），适配不同屏幕，避免固定像素导致的错位；
• 父容器会留在<h1>下方，iframe在父容器内定位，不会跑到页面顶部。

注意：不要直接给父容器加padding-top，因为绝对定位的iframe不会占用父容器的空间，padding-top只会撑开父容器，但iframe的位置还是相对于父容器的左上角，所以会导致视觉上内容移动。

内容的提问来源于stack exchange，提问作者Duc Huy Nguyen Tran