Chrome中的iFrame始终显示在绝对定位的div上方

Question

我在将iframe显示在绝对定位的容器下方时遇到问题。这个问题似乎只出现在谷歌Chrome上，而在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在内的所有其他当前浏览器。

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

有什么想法吗？

Answer 1

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

此外，您的CSS使用id选择器（＃）而不是类选择器（。）