2010年3月9日火曜日

z-indexとpositionの大事な関係。

サイト制作をしていて、headerの背景が、main contents部分の上に重なり、main contentsの文字が欠けてしまって困りました。

z-index関係とは分かりつつ、試行錯誤の末やっと解決したのでメモです。

position:relative;等の指定(static以外のpositionプロパティ)をすると、z-indexは高くなり、指定していない要素の上に重なってしまうということで、
main contents部分のpositionをrelativeにしてもIE6はダメで、結局main contents内にmainとsidebarという領域をfloat等で作っていたので、それらにもposition:relative;を指定してやると無事重なり順を変更できました。

z-indexとpositionはワンセットで指定するものですね。
positionを使って大きめの背景を使い、次の要素をネガティブmarginなどで上にずらしてみたりすると、この問題に遭遇しやすいかもです。

0 件のコメント:

コメントを投稿