0

我在使 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 在内的所有其他当前浏览器。

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

有什么想法吗？

4

1 回答 1

1

I think what you are looking for is a parameter on the end of your iframe source. Try using http://www.youtube.com/embed/VuNIsY6JdUw?wmode=opaque

Also, your CSS is using the id selector (#) instead of the class selector (.)

于 2012-01-19T21:44:58.673 回答