CSS の z-index プロパティを利用すればボックスの重なり順序を指定できる

ボックスに margin: 0 0 -20px 0; なんていう指定をして、下のボックスにわざと重ねてデザインすることがあると思います。こんなことをするのは私だけか心配ですが、このように重ねて表示させようとすると、Firefox と IE では表示結果が異なってしまうことがあります。ボックスの重なり表示を統一するには z-index を使うと良いです。

1
2
3
4

.hoge {
position: absolute;
z-index: 2;
}

z-index の値が大きいと手前に、小さいと後ろに表示されます。デフォルトではすべてのボックスに0が設定されていますので、手前に表示させたいボックスに上記のように記述してやれば手前に来ます。まだ Firefox と IE7 でしか確認していないので、他のブラウザでも確認したいです。