在 iframe 上覆盖 div答案

【问题标题】：overlay div over iframe在 iframe 上覆盖 div
【发布时间】：2011-01-06 20:53:35
【问题描述】：

我正在制作一个类似于 uservoice 小部件的小部件，但我希望页面内容位于 iFrame 中，而不是通过 javascript 显示小部件。我怎样才能拥有一个完整的页面（宽度/高度 100%）iFrame，其中一个 div 固定在浏览器的左侧，一个示例（使用 javascript 而不是 css/html）在这里：http://uservoice.com/demo

我希望该小部件以本机方式显示在页面上，并通过 iFrame 加载内容。

有什么想法吗？我不能让 iFrame 填满整个页面，也不能让 iFrame 出现在顶部。我玩过 z-indexes 没有运气。代码示例：

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

            <style>
            #widget {
                left: 0px;
                position: absolute;
                top: 50%;
                display: block;
                z-index:100001;
                width: 25px;
                }
            #content {
                z-index:1;
                }
            </style>
</head> 
<body> 
    <div id="widget"> 
    widget
    </div>


    <iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe> 
</body> 
</html>

【问题讨论】：

我在 Ubuntu 上使用 ff3.5.7 测试了您的代码，它似乎工作得很好。您使用的是什么设置？
z-index 在 iframe 上不起作用。

标签： css iframe html

【解决方案1】：

如果您没有加载跨域，那么您可以使用 jquery ajax 调用加载 http://docs.jquery.com/Ajax/load

$(document).ready(function () {
    $("#content").load("page.html");
});

并将您的 iframe 替换为

<div id="content"></div>

【讨论】：

【解决方案2】：

您可能需要添加边距：自动；到您的 iFrame 或浮动 div。这将使其 100% 填满屏幕。

例子：

.width {
   position:absolute;
   left:0;
   right:0;
   top:0;
   bottom:0;
   width:250px;
   height:150px;
   margin:auto;
}

要将其固定在浏览器的左侧，您可以使用：

margin:auto auto auto 0;

祝你好运！

【讨论】：

【解决方案3】：

您可以将 iframe 包装在 Z-index 较低的 div 中，然后在其上放置一个 Z-index 较高的 div。

【讨论】：

只有在你需要在 css 中为两个元素添加绝对位置时才会起作用。 :)

【解决方案4】：

那是“clickjacking”，不是吗？

任何事情都不可能长期有效，因为浏览器（正确地）将此视为需要预防的安全威胁。

【讨论】：

【解决方案5】：

这对我有用：

添加具有高 z-index 和绝对位置的覆盖 div
使 iframe 也定位为绝对位置
在 div 中添加 iframe

带有叠加层的div：

<div style="z-index:99;position:absolute;top:0;right:0">
  ...overlay html...
</div>

iframe：

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>

【讨论】：

【解决方案6】：

使用此代码，我在右侧得到一个双滚动条。一个用于网站，一个用于 i-frame。

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>
<div>
  <iframe src="http://..."> </iframe> 
</div>

【讨论】：