IE8でのz-indexバグの原因(追記)

IE8では、親要素の重なり順が優先される。(IE6,IE7でも同様)これにより生じるz-indexのバグを回避するためには、以下のように対処する。

IE8でバグが発生してしまう書き方の例と回避方法

(IE以外では問題なくz-index:1000を指定したdivが1番上に表示される)

<div style="position:relative;">
  <div style="position:absolute;z-index:1000;">
   上に表示したいdiv
  </div>
</div>
<div style="position:relative;">
  <div style="position:absolute;z-index:1;">
　　下に表示させたいdiv
  </div>
</div>

↓親要素のz-indexで重なり順を設定すると、問題が解決する。

<div style="position:relative;z-index:2;">★
  <div style="position:absolute;z-index:1000;">
   上に表示したいdiv
  </div>
</div>
<div style="position:relative;z-index:1;">★
  <div style="position:absolute;z-index:1;">
　　下に表示させたいdiv
  </div>
</div>

IE8ではposition属性にrelativeやabsoluteを指定するとz-indexが初期化されてしまうため、親要素で重なり順を決めることで回避できる。 この他に、jsファイルを使って動的にz-indexをしている場合はCSSで直接指定する方法に変えることで問題が解決する場合もある。