上面的iframe主要的html

我想建立一個簡單的HTML測試，其中iframe覆蓋主要HTML的元素，所以它不會被看到。我將iframe配置爲100％的高度和寬度，但好像主HTML仍在查看頁面內的元素。上面的iframe主要的html

這是主要的HTML：

<HTML> 
<HEAD> 
<style> 
html, body, iframe { 
margin:0; /* remove any margins of the IFrame and the body tag */ 
padding:0; 
height:100%; /* set height 100% so that it fills the entire view port*/ 
} 

.iframe { 
height: 100%; 
width: 100%; 
} 
.main { 
height: 100%; 
width: 100%; 
position:absolute; 
z-index:10000000; 
} 
</style> 
</HEAD> 
<BODY> 
<div class=main> 
<iframe src="iframe.html" width=100% height=100%></iframe> 
</div> 
<p>Test is after the iframe</p> 
</body> 
</HTML>

我想對於不出現，因爲它應該是需要的頁面的100％的iframe下的「測試是在iframe後」的文字。

它目前的樣子截圖：

來源

2015-09-06 nimi

如果您正在尋找的地方「上面」當前頁面內容的iframe，您可以利用的z-index和iframe和絕對如下定位。

position: absolute; 
z-index: 9999;

另一種選擇（這可能會更好看，提供更多的控制），將使用類似收藏夾或的fancybox（JS庫）。這將允許您動態控制html的覆蓋範圍，並允許您將iframe代碼放置在提供更多控制的每個實例中。

來源

2015-09-06 08:28:22

我已經添加了位置和z索引iframe的CSS，它仍然無法正常工作 – nimi

可能爲我們提供了一個鏈接，這將幫助我們調試什麼繼續。 –

你可以在這裏試試：http://disha.besaba.com/test/main.html – nimi

首先，擺脫圍繞iframe的div，因爲這不是必需的。

<iframe src="iframe.html"></iframe> 
<p>Test is after the iframe</p>

這是如何設計iframe以覆蓋整個頁面的方式。請注意，在CSS選擇器中iframe之前沒有.。 border: none非常重要，否則iframe內容將超出可見區域。

iframe { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    border: none; 
}

在這裏看到一個例子：https://jsfiddle.net/c875zwda/

來源

2015-09-06 08:42:54

我已經刪除了div並應用了你的css。仍然得到相同的結果。 – nimi

@nimrodma你在用什麼瀏覽器？ –

我嘗試了Windows 7中的chrome和firefox – nimi

上面的iframe主要的html

回答

相關問題