為什麼我的下拉式選單出現在 Chrome 和 IE9 中的 YouTube 影片後面？

YouTube 影片嵌入與z-index 問題

使用多層下拉導覽選單下方的iframe 嵌入YouTube 影片時，您可能會遇到Chrome 和Internet Explorer 中下拉選單出現在影片後面的問題。將滑鼠懸停在主導航項目上時，下拉式選單應出現在所有瀏覽器中的影片頂部。

問題 1：為什麼下拉式選單出現在 Chrome 和 IE9 中的 YouTube 影片後面？

此問題與 YouTube 影片本身有關，與 iframe 無關。 YouTube 嵌入包含覆蓋其他 CSS 設定的內部 CSS，包括您的 z-index 值。

問題 2：為什麼設定 z-index:-999 !重要；iframe 上的 仍然會導致問題？

YouTube 嵌入程式碼中的覆蓋 CSS 優先於您應用於 iframe 的任何 z-index 設定。

解決方案：

要解決此問題，請將以下參數新增至嵌入影片的網址：

&wmode=Opaque

此設定允許影片融入背景，從而允許頁面上的其他元素

附加說明：

• 您還可以使用參數wmode=transparent 代替Opaque，儘管這可能會導致透明度
• 或者，您可以在加載頁面上的所有iframe 之前使用jQuery 修改其URL，如下面的程式碼片段所示：

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

以上是為什麼我的下拉式選單出現在 Chrome 和 IE9 中的 YouTube 影片後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！