css - z-index 在 Internet Explorer 9 中不起作用

Question

请看下面的截图。我有一个 jQuery 菜单和一个加载 PDF 文档的 iframe。在 Chrome 和 Firefox 中，这可以完美运行，并且菜单出现在 iframe 的顶部。我z-index: 2在菜单上有一个z-index: -1，在 iframe 上有一个。

关于如何在 IE 中解决此问题的任何想法？

编辑：jsFiddle

http://jsfiddle.net/hkA2v/1/

Answer 1

尝试添加position:relative;。iframe

iframe{
  position: relative;
}

Answer 2

与此特定问题没有直接关系。但是，在 IE9 中遇到类似 z-index 问题的人可能会考虑在某些情况下添加透明背景。

因为在 IE 中，带有链接的元素必须有背景才能被点击。否则鼠标“看穿它”。

background: url(transparent.gif);

来源：论坛帖子

Answer 3

Make sure all elements with z-index are siblings of the same parent. If you start nesting elements inside elements and apply new z-index properties to those children, the z-index will start from the parent's z-index, not any z-index properties set before the parent.

IE is very picky with z-index.