在 iframe 中显示具有固定位置的 div 容器答案

【问题标题】：Display div container with a fixed position in a iframe在 iframe 中显示具有固定位置的 div 容器
【发布时间】：2014-07-22 22:27:18
【问题描述】：

我的 HTML 内容总是在顶部显示一个 div 框：

<html>
<head>
<style>
    .fixedtop1 { position: fixed; top: 5px; left: 0; right: 15px; border: 1px solid black; z-index: 50; padding: 5px}
    .center250a { width: 350px; margin-left: auto; background-color: #f0f0f0; } 
</style>
</head>

<body>
<div style="height:1000px">
    <div style="margin-top:20px" class="fixedtop1 center250a">  
        <div class="text-style" style="float:left;margin-right:2px"><b>Test:</b></div><div>0</div>
        <div style="clear:both"></div>
    </div>
 <p> Just a Test </p>
<br/>
</div>
</body>
</html>

现在的问题是 position: fixed 使用 viewport 作为容器元素，但上面的 HTML 内容应该集成在 iframe 中。因此，该示例在不使用 iframe 作为独立 HTML 页面但不使用 iframe 的情况下工作。

如何解决？我无法将上面 HTML 内容的一些 div 元素放在 iframe 之外，但我可以为 iframe 标签提供一些样式属性。

【问题讨论】：

标签： html iframe css-position

【解决方案1】：

iframe 和它的父级是具有不同浏览上下文的不同文档。所以 iframe 内部的元素不会与 iframe 父级交互，也不能相对于它进行固定。

您需要在 iframe 中设置它，而不是在 div-element 中设置固定位置。

iframe 内的元素不需要固定定位。

【讨论】：

也许你误会了我……我不想修复 iframe 的位置，而是 iframe 中的 div 容器。请举个例子。
对不起，我可能没听懂你的问题。您是否希望您的 div 容器（在 iframe 内）保持固定在页面顶部，对吗？
不是在页面顶部，而是在 iframe 的顶部，是的。