我的页面上有一个嵌入的 iframe YouTube 视频和一个 CSS 下拉列表，我需要覆盖它。我在 IE10 和 Firefox 20 中都遇到了问题。
在 IE10 中，下拉菜单出现在视频后面。它似乎不尊重 z-index。
在 FF20 中，下拉菜单出现在顶部，但 CSS3 角被剪裁并显示一个缺口。CSS3 阴影也不会出现。我假设他们在 iframe 后面。下面是我的 CSS，我创建了一个 jsbin，您可以在以下位置结帐：http: //jsbin.com/edobux/1/
.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;
}