Chrome 中的 iFrame 总是出现在绝对定位的 div 上方答案

【问题标题】：iFrame in Chrome always appears above absolutely positioned divsChrome 中的 iFrame 总是出现在绝对定位的 div 上方
【发布时间】：2011-12-03 14:16:20
【问题描述】：

我在让 iframe 出现在绝对定位的容器下方时遇到问题。这个问题似乎只出现在谷歌浏览器上，而在 IE 9、Firefox 和 Safari 上都可以。

代码示例

<div id="cont_1" class="containers">
    mixed content with images and text. 
</div>
<div id="cont_2" class="containers">
    mixed content with images and text. 
</div>
<div id="cont_3" class="containers">
    This one holds an iframe - An youtube video.
    <iframe width="450" height="259" sr c="http://www.youtube.com/embed/VuNIsY6JdUw" frameborder="0" allowfullscreen></iframe>
</div>
<div id="cont_4" class="containers">
    mixed content with images and text. 
</div>

所有这些容器（幻灯片）共享使用 JS 生成的类似 CSS。

#containers {
 height: 398px;
 width: 456px;
 overflow-x: hidden;
 overflow-y: hidden;
 padding: 0px;
 margin: 0px;
 position: absolute;
 left: 184px; /* Successive ones have greater value. */
 zIndex : 150; /* Every successive div has zIndex higher than the previous one. */
}

每个连续的 div 都有一个大于前一个的 zIndex。所以 150、152、154、156。

第四个容器设置为始终高于其他元素。确实如此，但不是在将 youtube 视频插入第三个视频时。视频始终位于所有元素之上，包括第四个元素，它应该位于顶部。

我通过样式表和 JS 为 iFrame 尝试了以下 css。

.containers iframe {
   position : relative;
   z-index : -100;
}

但这对 Chrome 14 没有帮助，尽管它适用于包括 Safari 在内的所有其他当前浏览器。

如果有人想知道这是做什么用的，它有点像堆栈，它允许查看带有动画的幻灯片。单击下一步会将最顶部的项目返回，而其边缘仍然可见。

有什么想法吗？

【问题讨论】：

标签： google-chrome iframe css-position z-index wmode

【解决方案1】：

我认为您正在寻找的是 iframe 源末尾的参数。尝试使用http://www.youtube.com/embed/VuNIsY6JdUw?wmode=opaque

另外，您的 CSS 使用的是 id 选择器 (#) 而不是类选择器 (.)

【讨论】：