IE6と7あたりでz-indexが効かなくて困った場合の解決方法

技術

早く死なないかなIE6。寿命後どれくらいかな。
いろいろ解決方法は提示されてるけど、どれもこれもわかりにくいというか説明が長い！
のでメモ。
結論
◎IE6、IE7の仕様では、positionにrelative、absoluteなどを使うと重なり順が自動で設定される。（たぶん初期値0）
○親要素にz-indexを設定している場合、その中の要素でz-indexを指定しても親要素内でしか効果が無い！（これはどのブラウザでも同じ）
（↑第一階層z-index:0 > 第二階層z-index:2000 よりも 第一階層z-index:1 > 第二階層z-index:0 の方が重なり順は上になる）
○z-index要素なしよりz-index:0のほうが強い。どちらも同じz-index:0の場合はソース順で下に書かれたものが強い。（これも他ブラウザと同じ）
×IE6、IE7では親要素positionにrelativeをつかっているとz-indexが効かない！
（↑若干勘違い。効いていないのではない。relativeを使うとz-index:0が自動で設定されるので、親要素の設定が子要素よりも強くなっている）
×IE6、IE7ではz-indexは同一階層間での重ね順の前後を指定するもので、 グローバルで前後を指定できない
（↑これも勘違い。relativeを使うとz-index:0が自動で〜のせいでabsoluteのブロックが子要素になっているから）
×IE6、IE7では下の階層（子要素）より上の階層（親要素）のz-indexが優先される！
（↑z-indexが設定されている場合はどのブラウザでも同じ）


対処法
そもそもrelativeの動きをみんな勘違いしてたからこういうことが起きてるんだよね…tukihatuもだけど。
relativeはabsoluteと動きが同じ！だからrelativeをabsoluteだと思って考えると割とわかりやすい。
・relativeを気軽にホイホイ使わない。absoluteを気軽に使っているようなものなので。
・relative、absoluteを使った場合、親要素のブロックにだけz-indexを設定する。

わかりやすいIE6、IE7のz-index仕様
この場合、一番上はposition:relative;によってz-indexが設定されている第三階層の<div style="position:relative;height:50px;">
<div data-id="header">←（z-index:なし）
<div style="position:relative;width:400px;height:20px;background:#FFCCCC;">←（z-index:0 二番目、ピンク）
<div style="position:absolute;width:300px;height:100px;background:#FFFF00;z-index:2000;">←（absolute、z-index:2000 二番目のブロックの中で一番上階層、黄）
牛乳<br>飲んで<br>くださいよ。
</div>
</div>
</div>
<div data-id="contents">←（z-index:なし）
<div data-id="section">←（z-index:なし）
<div style="position:relative;height:50px;">←（z-index:0 ここが一番上階層）
<div style="position:absolute;width:300px;height:100px;color:#FFFFFF;background:#0000FF;z-index:1">←（z-index:1、青）
だが<br>こと<br>わる。
</div>
</div>
</div>
<p>ぐぬぬ</p>←（z-index:なし）
</div>


サンプルともっとわかりやすい例）上のものをテキスト入れて書いてみる。

牛乳
飲んで
くださいよ。
だが
こと
わる。

ぐぬぬ


見事にIE6,IE7は青背景が上になる。他ブラウザは黄色背景が上になる。
IE6、IE7の仕様では、positionにrelative、absoluteなどを使うと重なり順が自動で設定される。（たぶん初期値0）ので、
IE6,IE7では実際のソースは下のようになっている。

牛乳
飲んで
くださいよ。
だが
こと
わる。

ぐぬぬ


このソースだと他ブラウザでも青背景が上になっているのが確認できると思う。判定に使われているのは親要素（ピンクと青）だけであることがお分かりいただけるであろうか。
対処法は親要素のz-indexで重なり順を設定すること。↓

牛乳
飲んで
くださいよ。
だが
こと
わる。

ぐぬぬ