IE 中的 Youtube z-index 问题

Posted 2023-05-09

【中文标题】IE 中的 Youtube z-index 问题

【英文标题】：Youtube z-index issue in IE

【发布时间】：2012-12-06 07:21:57

【问题描述】：

我正在玩 youtube api，并在 http://jsfiddle.net/aaronk85/wapFR/ 中有以下代码

<div id="video-wrap2"></div>
<div id="video-wrap">
    <div id="play-video"></div>
</div>
<style>
#video-wrap2 
    background-color: red;
    width: 666px;
    height: 666px;
    z-index: 1000;
    position: absolute;


#play-video 
    display: inline;
    float: left;
    height: 400px;
    width: 100%;


#video-wrap 
    float: left;
    display: inline;
    width: 610px;
    overflow: hidden;
    position: absolute;    
    z-index: 1;

</style>
<script>
$(document).ready(function() 
    $("#embed").replaceWith("<div id ='play-video'></div>");
    $.getJSON("https://gdata.youtube.com/feeds/api/playlists/UUJUAqHnkDX15IvFoXIGTm2A?alt=json-in-script&callback=?&max-results=1", function(data) 
        $.each(data.feed.entry, function(i, item) 
            var dataContainer = $("#play-video");
            var video = item.media$group.media$content[0].url;
            video = video.replace('https://www.youtube.com/v/','https://www.youtube.com/embed/');
            video = video.replace('version=3&f=playlists&app=youtube_gdata','wmode=opaque');
          $('#play-video').append("<iframe wmode='opaque' style='z-index:0;position:absolute;' width='610' height='400' src="+video+"' frameborder='0' name='vid-frame' id='vid-fade' allowfullscreen></iframe>");    
        );
    );
);
</script>

我希望 video-wrap 2 出现在视频顶部（我选择的随机播放列表）。 在除 IE 之外的所有浏览器中，这似乎都有效。我在 IE 中缺少什么？ 我已经尝试过不透明/透明的组合，但我无法让它工作。 我也发现了几个类似的问题，但是在尝试了这些问题之后我仍然遇到问题？

【参考方案1】：

jsFiddle Demo

在 IE 网络浏览器中，z-index 属性的堆栈顺序为子元素重置，具体取决于网页布局。

但是在您的 jsFiddle 中，您还对除子元素以外的所有元素使用 position:absolute。

要解决此问题，请将position: absolute; 添加到您的#play-video CSS 样式中。

---

此备用jsFiddle 不使用任何z-index 属性，仅使用子元素#play-video 的position:absolute 设置。