position:relativeの使いドコロ

最近久し振りにブログのデザインをいじっていて、CSSをすっかり忘れていることを痛感しました。やはり定期的にCSSを扱うようにしていないとダメですね。
中でもすっかり頭から抜けていたのがタイトルにあるposition: relativeの使いドコロです。個人的にはこのposition: relativeを使いこなせるようになることがCSS初心者を脱する鍵だと思っています。
そこで備忘を兼ねてposition: relativeの使いドコロを簡単にまとめてみました。

position: relativeとは？

まず、そもそもposition: relativeとは何でしょうか。
CSSのpositionプロパティはボックスの配置方法を決めるためのプロパティで、その値としてはstatic、absolute、relative、fixedの4種があります。初期値はstaticです。位置の指定はtop、bottom、left、rightの各プロパティで行います。
それぞれの値の意味は下の表のようになります。

値	説明
static	HTMLに記述された順序に従い通常の方法でブロックを配置します。
relative	staticの場合の位置を基準にブロックを相対配置します。後続のブロックの配置はそのままです。
absolute	親要素またはbody要素（つまりページ全体）を基準にブロックを絶対配置します。後続のブロックは詰めて配置されます。
fixed	ウインドウを基準にブロックを絶対配置します*1。さらにウインドウ内での位置は固定されスクロールしても位置が変化しなくなります。

すなわちposition: relativeを指定するとtop、bottom、left、rightの各プロパティの値の分だけそれぞれ通常の位置の上、下、左、右からずらして要素を配置することができます。top、bottom、left、rightの各プロパティにはマイナス値も使えます。例えば、top: 10pxと組み合わせれば通常位置を基準に上から10pxの位置（すなわち通常位置の10px下）に、top: -10px; left: 10pxと組み合わせれば通常位置を基準に上から-10px左から10pxの位置（すなわち通常位置から上に10px右に10pxずれた位置）にボックスが配置されます（下図）。

ただ、実際のところposition: relativeでは位置をずらした分後続の要素を詰めないので通常の配置の位置にぽっかりと無駄なスペースが空いてしまい、CSSでWebデザインをする上ではあまり使い勝手が良くありません。また、古いIEではバグにより本来のスペース以上に広く空白が空くことがあるのでposition: relativeを使う場合にはIEでの表示にも注意する必要があります。

それではposition: relativeは使わないかというとそんなことはありません。確かに相対配置は使いにくいのですが、position: relativeという設定自体はpositionプロパティを利用したデザインの上で欠かせない存在だと思います。
次にどのような場面でposition: relativeという設定を使うのか、使いドコロを見ていきましょう。

使いドコロ1: position: absoluteと組み合わせる

1つ目の使いドコロはposition: absoluteと組み合わせる使い方です。
先程の表のposition: absoluteの説明で「親要素またはbody要素を基準に…」と書きました。では親要素とbody要素のどちらを基準にするかはどのように決まるのでしょうか？
実はこれは親要素のpositionプロパティの値によって決まります。position: absoluteを指定した要素の親要素にpositionプロパティの値がrelative、absolute、fixedのものがあればそのうち最も近い階層の親要素が、relative、absolute、fixedのものがなければbody要素が絶対配置の基準となります。つまり絶対配置でbody要素以外を基準にしてボックスを配置したい場合、基準としたい親要素のpositionプロパティをrelative、absolute、fixedのいずれかに設定しておけばよいわけです。

このとき便利なのがposition: relativeです。デザイン上の必要性があり基準としたい親要素に既にrelative、absolute、fixedのいずれかが設定されていればそれをそのまま利用できますが、そうでない場合にはposition: relativeにし、top、bottom、left、rightの各プロパティの値を設定しないでおけば、absoluteやfixedのように後続の要素を詰めてデザインを崩すことなく通常位置のままで絶対配置の基準とすることができます。

この使い方は言うならば「絶対配置の基準を定めるposition: relative」といったところでしょうか。

使いドコロ2: z-indexと組み合わせる

2つめの使いドコロはz-indexプロパティの指定と組み合わせる使い方です。
position: absoluteなどを使ってブロックを色々な場所に配置しているとブロックの重なり方を制御する必要性が出てきます。このようなブロックの重なる順序を制御するのがz-indexプロパティです。z-indexプロパティを指定した場合、通常の値を0としてz-indexの値が大きいものほど手前に重ねて表示されます。
このz-indexは凝ったデザインを作る際に便利なプロパティですが、これを有効にするためには適用する要素のpositionプロパティの値がrelative、absolute、fixedのいずれかである必要があります。
使いドコロ1の場合と同じくここでもposition: relativeが便利です。通常位置に配置しながらz-indexプロパティを指定したい場合にtop、bottom、left、rightの各プロパティを設定せずにpositionプロパティの値をrelativeに設定すれば、デザインを崩さずにz-indexプロパティの指定を適用することができます。
こちらは差し詰め「z-indexを適用するためのposition: relative」といったところですね。

以上2つの使いドコロをしっかり押さえておくと、positionプロパティを使ったデザインで苦労をすることがぐっと少なくなりますよ。

*1:印刷等のウインドウを持たないメディアの場合はbody要素が基準になります。