Css 一旦屏幕大小小于1200px，Iframe将停止工作。-Joomla 3 bootstrap3模板

我已经建立了一个建筑网站，其中有一个I框架嵌入另一个网站的房屋图像和平面图。我使用的是Joomla3.4和Bootstrap3，它可以正常工作，直到屏幕大小低于1200px。它仍然可以观看，但在移动设备上，或者如果您将PC上的浏览器大小更改为低于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

看到

位置：绝对

将元素从文档流中移除，并有效地将它们设置为其他元素的“顶部”，我怀疑在这种情况下，您的

iframe

中有另一个元素重叠，因此使其“不可读取”

如果您将元素的位置设置为“相对”，并为其指定一个高z索引编号，则应将其设置为“高于”文档中的所有内容，并可再次单击

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

---

视为

位置：绝对

将元素从文档流中移除，并有效地将它们设置为其他元素的“顶部”，我怀疑在这种情况下，您的

iframe

中有另一个元素重叠，因此使其“不可读取”

如果您将元素的位置设置为“相对”，并为其指定一个高z索引编号，则应将其设置为“高于”文档中的所有内容，并可再次单击

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

---

绝对定位将元素从文档流中取出，并将其设置为文档中其他元素的“顶部”。可能发生的情况是，另一个具有透明背景的元素与iFrame重叠，使其无法读取。您可以尝试使用z索引进行相对定位：100；或者更大，看看它是否可以点击。谢谢凯尔，我会试试，让你知道。很棒的东西！凯尔把它修好了。100还不够，我做了3000，这就解决了问题。不客气。我会试着把它写下来作为答案。：）绝对定位将元素从文档流中取出，并将其设置为文档中其他元素的“顶部”。可能发生的情况是，另一个具有透明背景的元素与iFrame重叠，使其无法读取。您可以尝试使用z索引进行相对定位：100；或者更大，看看它是否可以点击。谢谢凯尔，我会试试，让你知道。很棒的东西！凯尔把它修好了。100还不够，我做了3000，这就解决了问题。不客气。我会试着把它写下来作为答案。：）应该是300而不是3000