如何固定 iframe 的位置，使其在滚动时也更改其 TOP 级别？

Question

我想固定 iframe 元素的位置。问题是，如果我保持位置“STICKY”，它也会覆盖空间并推动下面的元素。因此，最佳可能值是“绝对”位置。

但现在如果我保持绝对位置，它不会随着我滚动而移动。所以 sticky 和 absolute 都不能完美地工作。

我希望 Iframe 位于输入搜索下方文本的顶部，并且它应该与屏幕一起滚动。就像带有位置粘性的输入元素一样。

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

<input type="search" id="search" placeholder="Search...">
<iframe id="search-box" src="https://www.google.com/search?igu=1&ei=&q="></iframe>

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

<style>
input#search {
 position: sticky;
 top: 43px;
 width: 100%;
 padding: 3px 5px;
 font-size: 20px;
 background: #f1f1f1;
}

iframe#search-box {
 position: absolute;
 left: 5%; top: 76px;
 width: 90%;
 height: 360px;
 border: 1px solid black;
}
</style>

Answer 1

在公共 div 下将 input 和 iframe 元素都添加，然后将粘性位置值添加到它解决了问题！