0

絶対配置コンテナーの下に iframe を表示する際に問題があります。この問題は Google 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 です。

4 番目のコンテナーは、常に他の要素よりも上に表示されるように設定されています。ありますが、YouTube ビデオが 3 番目のビデオに挿入されている場合はそうではありません。ビデオは常に、一番上にあるはずの 4 番目の要素を含むすべての要素の上にとどまります。

スタイルシートと JS の両方を使用して、iFrame 用に次の css を試しました。

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

ただし、これは Chrome 14 では役に立ちませんが、Safari を含む他のすべての現在のブラウザーでは機能します。

これが何に使われるのか知りたい人のために説明すると、スタックのようなもので、スライドをアニメーションで見ることができます。[次へ] をクリックすると、一番上のアイテムが送り返されますが、その端はまだ表示されています。

何かご意見は？

4

1 に答える 1

1

あなたが探しているのは、iframe ソースの末尾にあるパラメーターだと思います。http://www.youtube.com/embed/VuNIsY6JdUw?wmode=opaqueを使用してみてください

また、CSS はクラス セレクター (.) の代わりに ID セレクター (#) を使用しています。

于 2012-01-19T21:44:58.673 に答える