z-indexまとめ

cssを使ったポジション取りはIE6からIE8、最新のFirefoxやchromeすべてに対応させるという際には結構面倒なことになります。結構ハマるのでその際の注意事項をまとめておきます。すべてのブラウザーに共通に表示させる際には、
positon:absolute;
positon:relative;
positon:fixed;

の3つとz-indexの関係を理解しておけば大丈夫です。
結果からいうと、最新のFirefoxやchromeはブロックをまたいでz-indexの設定が可能。しかし、IE6からIE7は同レベル(という言い方が正しいのか正しくないのかわかりませんが)のブロック要素でのみz-indexの設定が可能ということになります。つまり、ブロックレベルの階層が違う同士のz-indexの設定が反映されないということです。
ドロップダウンメニューなんかでは、ul il ul ilぐらいの要素が次のブロックに重なることがままあると思うのですが、IE6〜IE7だと次のブロック要素の下に潜り込んでしまう場合があります。こういう場合は、重ねるレベルをその同レベルの親要素のところまでさかのぼってz-indexを設定してやらないとダメです。
<div id="menu">
<ul>
<li>
<ul>
<li>menu</li> ←(*1)
<li>menu</li>
<li>menu</li>
</ul>
</li>
</ul>
</div>

<div id="contents">←(*2)
hogehoge
</div>

最新のブラウザーだと(*1)の要素と(*2)の要素にz-indexを設定しても大丈夫なんですが、IE7〜IE8だと同レベルの親要素、つまりこの場合だと
<div>要素までさかのぼって設定しないと重なり順を設定できません。普通にCSSを組んじゃうと次のブロックの下に潜り込んでしまいます。こういう場合は、
#menu {
positon:relative;
z-index:100;
}
#contents {
positon:relative;
z-index:0;
}

という感じで設定してやらないとダメです。
構造が複雑になってくると私もわけがわからなくなる時があるんですが、ここらは結構ハマるのでご注意。