relative positioning

position: relative

'position: relative'

[1] CSS'position' 特性の値 'relative' は、相対配置によってレンダリングすることを示します。

仕様書

意味

[3] 'position' の値 'relative' は、 位置通常フローに従って計算され、その後通常の位置から相対的にずらして配置されることを示します。 なお、通常フローに従って計算した位置のことを通常フローでの位置 (position in normal flow) といいます。 CSS 2.1

関連

[5] 'position: relative''display''table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', 'table-caption'要素に指定されたときの動作は CSS 2.1 では未定義とされています CSS 2.1

相対配置

[7] 通常フロー浮動 (float) によって配置したを、その位置から相対的に移動させる (offsetting する) 配置法を、 相対配置 (relative positioning) と呼びます。 >>6

仕様書

レンダリング

[4] 相対配置される自体は一旦通常フロー浮動処理モデルに従って位置の決定がなされますが、 その後すぐにずらして再配置されます。ですが、 相対配置されるの相対移動はその後の配置には影響を与えません。 後続のの配置に当たっては相対配置によるの相対移動がなかったものとして計算されます。 CSS 2.1, >>6

[8] 従って、相対配置すると同士が重なる (overlap) ことがあります。 >>6

[9] 相対配置される'overflow''scroll''auto'から溢れる (overflow) 位置に来る場合には、 利用者エージェントにはその相対配置されるにも利用者がアクセスできるようにする (スクロールバーを出す) 必要があります。 >>6

水平方向の移動

[11] 'left' 特性方向に、 'right' 特性方向にどれだけ移動させるかを示します。 >>6 (特性の名前と移動方向が異なることに注意してください。'left'の左側にどれだけ空間を作るか (= どれだけ右側に移動するか) と考えると分かりやすいですね。)

[12] 'left''right'算出値は常に left = -right となります。つまり、 相対配置によっての横幅が変わることはありません。 >>6

'left'指定値'right'指定値'left'算出値'right'算出値
'auto''0'移動しない
'auto'その他'right'指定値 × -1指定値左に移動
その他'auto'指定値'right'指定値 × -1右に移動
その他その他左右どちらかが勝つ >>13

[13] 'left', 'right' の両方に 'auto' でない値が指定されている状態は過制約 (over-constrained) であり、一方が無視されます。 どちらが勝って (win) どちらが無視されるかは包含ブロック'direction' によって決まります。 >>6

垂直方向の移動

[14] 水平方向の場合と同様に、'top''bottom'に移動させることができます。左右を上下に読み替えると垂直方向の場合になります。 ただし、過制約な場合、 'top' が常に勝ち、 'bottom'算出値は -'top' になります。 >>6

関連

[10] 相対配置箱包含ブロック確立することがあります。 >>6 包含ブロックの項を参照してください。

[15] の高さの計算においては相対配置による移動は考慮されません。従って、 相対配置箱行箱の外側にレンダリングされることは十分あり得ます。