如何讓iframe在IE中尊重z-index？

我在我的網站上有一個youtube iframe元素，但它位於我的菜單項旁邊。當我將鼠標懸停在菜單項上時，會打開部分覆蓋iframe的子菜單（因爲它的位置，顯然這不是它的特定功能）。這在Firefox中運行良好，但像往常一樣，它不在IE中，這裏iframe覆蓋菜單，使其基本上不可讀。是否有一個選項需要添加到iframe中才能使其工作，還是僅僅是不可能？如何讓iframe在IE中尊重z-index？

（測試與IE9的時刻）

來源

2011-11-26 Valyrion

嘗試使用http://www.youtube.com/embed/ video_id鏈接，但不是http://www.youtube.com/v/video_id這是我的情況的問題。嵌入應該使用，但不是V. – Spirit

嘗試使用Youtubes iframe嵌入方法（如果那不是你已經在做，並添加：的wmode =透明的URL（更換&如果它不是第一個url變量）

來源

2011-11-26 13:04:00 box86rowh

它的工作，hooray！ – Valyrion

FYI ，iframe（或包含它的div）需要一個明確的'z-index'才能工作。 – joescii

添加wmode = transparent非常好，非常感謝！ – Migs

有這個問題的幾個問題。首先，IE中沒有任何問題可以使用z-index在您的文檔中將iframe設置爲高於或低於其他內容。只要您的iframe位於相對位置，絕對位置或固定位置，較高的z-index會使您的iframe高於其他元素（如往常一樣）。

真正的問題出現在iframe的內容是閃存嵌入對象時。在這種情況下，如果flash對象的wmode參數設置爲「transparent」或「opaque」，則只能對其進行z定位，但如果使用wmode =「window」將Flash包含在HTML文檔中，則flash對象不起作用。

因此，如果您要包含外部資源（在您沒有訪問權限的網站中，如youtube），只有在使用這些模式時才能實現。如果要將Flash對象加載到可修改其內容的iframe中，請檢查：

<param name="wmode" value="transparent" />

已設置。

如果youtube使用「窗口」模式，您可以隨時使用自己的Flash播放器並動態掛接YouTube視頻，將Flash對象模式設置爲透明。

來源

2011-11-26 13:00:01

+1，用於解釋實際問題是什麼 – Valyrion

你能幫助我通過提供PDF格式的iframe答案（我正在使用福昕閱讀器）:( –

我？看到了類似的問題，默認Youtube鏈接詞應該是嵌入，

<iframe src="http://www.youtube.com/embed/video_id"></iframe>

但不只是v-LINK（v-LINK忽略的z-index）：

<iframe src="http://www.youtube.com/v/video_id" frameborder="0"></iframe>

下面是IE的示例：http://jsfiddle.net/7fd8Y/21/

來源

2016-01-12 20:05:53 Spirit

下面是一個非純JS溶液，可替代的JQuery：

var iFramesOnPage = document.getElementsByTagName("IFRAME"); 
for(var i = 0; i < iFramesOnPage.length; i++) { 
    var newiFrameURL = iFramesOnPage[i].getAttribute("src")+"?wmode=transparent"; 
    iFramesOnPage[i].setAttribute("src", newiFrameURL); 
};

來源

2016-02-05 20:54:31 JuanCarlosC

如何讓iframe在IE中尊重z-index？

回答

相關問題