Iframe在屏幕大小小于1200px时停止工作.-Joomla 3引导程序3模板

Question

我建立了一个建筑网站，在I帧中嵌入了另一个网站的房屋图像和平面图。我使用的是Joomla 3.4和bootstrap 3，它运行良好，直到屏幕大小低于1200px。它看起来仍然很好，但在移动设备上什么都不能点击，或者如果你把电脑上的浏览器大小改到1200像素以下。

我在iframe的外侧添加了一个div，并给它一个outerdiv的ID，然后按照另一个网站的建议在代码下面添加代码。

#outerdiv iframe {
position: absolute; /*-- I have also tried relative--*/
top:0;
left: 0;
width: 95%;
height: 100%;
overflow: hidden;
}

它现在可以正常工作，但它超过了页面上的其他元素。一旦我在它周围添加了另一个div，或者在iframe中添加了一个类以防止它与其他元素重叠，它就不再可以点击了。有人有这个问题吗？如果是的话，你可以分享如何克服问题吗

感谢Darryn

Answer 1

由于position: absolute;将元素从文档流中取出，并有效地将它们设置在其他元素的"顶部"，我怀疑在这种情况下发生的情况是，您在iframe的某个地方有另一个元素重叠，因此使其"不可点击"

如果将元素的位置设置为"相对"，并给它一个高z索引号，它应该将其设置为"高于"文档中的所有内容，并且可以再次单击。

iframe {
    position: relative;
    z-index: 100; /*or higher*/
}