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

Question

我有一个问题，使iframe出现在绝对定位的容器下面。这个问题似乎只出现在Google Chrome浏览器上，而在ie9、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>

所有这些容器(幻灯片)共享类似的CSS生成与JS。

#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视频插入到第三个时就不是了。视频总是在所有元素之上，包括第四个元素，它应该在顶部。

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

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

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

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

任何想法吗?

Answer 1

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

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