position: relativeとは？

まず、そもそもposition: relativeとは何でしょうか。

CSSのpositionプロパティはボックスの配置方法を決めるためのプロパティで、その値としてはstatic、absolute、relative、fixedの4種があります。初期値はstaticです。位置の指定はtop、bottom、left、rightの各プロパティで行います。

それぞれの値の意味は下の表のようになります。

すなわち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にしておけば、absoluteやfixedのように後続の要素を詰めないのでデザインを崩しませんし、top、bottom、left、rightの各プロパティの値を設定しなければ通常位置のまま絶対配置の基準とすることができます。

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

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

2つめの使いドコロはz-indexプロパティの指定と組み合わせる使い方です。

position: absoluteなどを使ってブロックを色々な場所に配置しているとブロックの重なり方を制御する必要性が出てきます。このようなブロックの重なる順序を制御するのがz-indexプロパティです。z-indexプロパティは通常の値を0として値が大きいものほど手前に重ねて表示します。

z-indexは凝ったデザインを作る際に便利なプロパティですが、これを有効にするためには適用する要素のpositionプロパティの値がrelative、absolute、fixedのいずれかである必要があります。

使いドコロ1の場合と同じくここでもposition: absoluteが便利です。通常位置に配置しながらz-indexプロパティを指定したい場合にtop、bottom、left、rightの各プロパティを設定せずにpositionプロパティの値をrelativeに設定すれば、デザインを崩さずにz-indexプロパティの指定を適用することができます。