如何固定iframe位置并使其随滚动同步调整top值？

要实现iframe悬浮在文本上方、跟随页面滚动且不挤压下方内容的效果，你可以通过给搜索框和iframe包裹一个sticky定位的容器来实现，具体调整如下：

核心思路 #

用sticky容器绑定搜索框和iframe的滚动行为，同时让iframe基于容器做绝对定位，既保证跟随滚动，又不占用文档流空间。

修改后的完整代码 #

<h1><center>Heading</center></h1>

<!-- 新增包裹容器 -->
<div class="search-container">
  <input type="search" id="search" placeholder="Search...">
  <iframe id="search-box" src="https://www.google.com/search?igu=1&ei=&q="></iframe>
</div>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<style>
/* 容器设置sticky+相对定位，绑定滚动行为 */
.search-container {
  position: sticky;
  top: 43px;
  position: relative;
  height: 40px; /* 和搜索框高度一致，避免容器占用额外空间 */
}

input#search {
  width: 100%;
  padding: 3px 5px;
  font-size: 20px;
  background: #f1f1f1;
}

iframe#search-box {
  position: absolute;
  left: 5%;
  top: 100%; /* 定位到搜索框底部 */
  width: 90%;
  height: 360px;
  border: 1px solid black;
  z-index: 10; /* 确保iframe在文本上层 */
}
</style>

效果说明 #

• 外层容器的sticky属性让整个搜索区域跟随滚动固定在顶部，保证iframe和搜索框始终同步位置。
• 容器设置固定高度，避免占用额外文档流空间，不会挤压下方段落。
• iframe基于容器做绝对定位，既不会影响页面布局，又能通过z-index悬浮在文本上方。

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