css - iframe 上的跨浏览器绝对定位 div？

Question

我的页面上有一个嵌入的 iframe YouTube 视频和一个 CSS 下拉列表，我需要将其覆盖。我在 IE10 和 Firefox 20 中都遇到了问题。

在 IE10 中，下拉列表出现在视频后面。它似乎不尊重 z-index。

在 FF20 中，下拉菜单出现在顶部，但 CSS3 Angular 被剪裁并显示一个凹口。 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;
}

Answer 1

有时 Flash 不能很好地处理 HTML 元素(取决于您嵌入它的方式)。如果您强制使用 YouTube 的 HTML5 播放器，您可以解决这个问题:

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

代码借自Force HTML5 youtube video