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;
}

このとき期待する動作は以下のとおり。

  1. 画面をスクロールした際、「#menuwrapper」「#gadget」が画面上部に固定されて「#wrapper」だけがスクロールされる。
  2. 「#menuwrapper」「#gadget」が重なりあうが、「#gadget」が上に表示される。

この期待した動作通りになっているのが下図である(Firefoxでの例)。

しかし、IE7では以下の図のとおり期待した動作にならない。

理由としては、

IE7限定なんだろうけど、z-indexは同一階層間での重ね順の前後を指定するもので、グローバルに前後を指定するものではなかったと。
http://www.komacchi.com/blogs/2009/08/cssie7z-index.php

つまり、上記の例では「#gadget」にいくらz-indexを指定しても「#wrapper」の中における重なりあいの順番が変化するだけ。
それとは別のブロックにある「#menuwrapper」との重なりあい順序は変化しない。

解決策としては、HTML側を変更するしか無いようだ。

_^_

# Related Page(s)

タグ:CSS


HOME2011年の記事InternetExplorer7のz-indexバグ

HOMEHOME CategoryCategory HistoryHistory

Site Search :

[HTML link code]
[PR]セール品のみ検索もできるAmazon検索