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

z-index を持つすべての要素が同じ親の兄弟であることを確認してください。要素内で要素のネストを開始し、それらの子に新しい z-index プロパティを適用すると、親の前に設定された z-index プロパティではなく、親の z-index から z-index が開始されます。

IE は z-index に非常にうるさいです。