ページに埋め込まれた iframe YouTube ビデオと、それをオーバーレイする必要がある CSS ドロップダウンがあります。IE10 と Firefox 20 の両方で問題が発生しました。
IE10 では、ドロップダウンはビデオの後ろに表示されます。z-indexを尊重していないようです。
FF20 では、ドロップ ダウンが上部に表示されますが、CSS3 の角がクリップされ、代わりにノッチが表示されます。CSS3 の影も表示されません。それらはiframeの背後にあると思います。以下は私の CSS で、http: //jsbin.com/edobux/1/でチェックアウトできる jsbin を作成しました。
.overlay {
background:#eee;
border:1px solid #ddd;
padding:30px;
position:absolute;
top:20px;
left:50%;
width:100px;
margin-left:-50px;
z-index:99;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.3);
}
.wrapper {
text-align:center;
background:#F00;
padding:20px;
position:relative;
z-index:1;
}