InternetExplorer7のz-indexバグ
Internet Explorer 7（IE7）で、CSSの「position:absolute」と「z-index」を設定した際にバグがあり、意図したとおりの表示とならない。
HTMLの例：
<div id="menuwrapper"> ヘッダー </div> <div id="wrapper"> <div id="contents"> コンテンツ </div> <div id="gadget"> twitterのボタンなど </div> </div>
CSSの例：
#menuwrapper{
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
#gadget{
position: fixed;
top: 0;
left: 0;
z-index: 5;
}
このとき期待する動作は以下のとおり。
- 画面をスクロールした際、「#menuwrapper」「#gadget」が画面上部に固定されて「#wrapper」だけがスクロールされる。
- 「#menuwrapper」「#gadget」が重なりあうが、「#gadget」が上に表示される。
この期待した動作通りになっているのが下図である（Firefoxでの例）。
しかし、IE7では以下の図のとおり期待した動作にならない。
理由としては、
IE7限定なんだろうけど、z-indexは同一階層間での重ね順の前後を指定するもので、グローバルに前後を指定するものではなかったと。
http://www.komacchi.com/blogs/2009/08/cssie7z-index.php
つまり、上記の例では「#gadget」にいくらz-indexを指定しても「#wrapper」の中における重なりあいの順番が変化するだけ。
それとは別のブロックにある「#menuwrapper」との重なりあい順序は変化しない。
解決策としては、HTML側を変更するしか無いようだ。
タグ：CSS
