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などで上にずらしてみたりすると、この問題に遭遇しやすいかもです。

IE6でp要素に幅を指定すると、floatしたimgの横がカラム落ち

IE6でimgをfloatさせてるのにpの横がカラム落ちするからおかしいなあ、と思っていたら、
p要素に幅を指定しているのが原因だった。

IE TESTERで調べていて、pに幅指定をしていたのを思い出し、pに幅指定されていると、floatしてもfloatしたimgのwidth+pのwidthが親要素のwidthより大きいと落ちる様子。

モダンブラウザは大丈夫だから、侮った。

pにwidthなんて指定しちゃいけませんね。やっぱ。

IE6とposition:absoluteと幅高さ指定。

IE6でposition:absolute;を使う場合、
どうもposition:relative;を指定する要素がしっかりwidthやheightが指定されていないと、position指定したとおりになってくれない様子。

モダンブラウザはOKだが、IE6でずれるので、いろいろやってみて縦横を指定したらOKになったので、メモ。

どちらかだけでもいいのかもしれない。要するにhasLayoutというあれが原因かな。。

backgroundの一括指定メモ。

background指定の際、

background-image:url(example.jpg) no-repeat;
ではエラーで、
background:url(example.jpg) no-repeat;
はOK。

なぜなら、background:という指定方法は、「ショートハンド」として複数の属性値を指定可能。

background:url(example.jpg) no-repeat 5px 0;
などとしたら、leftから5px,topは変わらず、となる。
数値指定は、left topの順番。

background,短くて便利。