'position: relative'[1] CSS の 'position' 特性の値
'relative' は、箱を相対配置によってレンダリングすることを示します。
[3] 'position' の値 'relative' は、
箱の位置が通常フローに従って計算され、その後通常の位置から相対的にずらして配置されることを示します。
なお、通常フローに従って計算した位置のことを通常フローでの位置といいます。
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] 通常フローや浮動によって配置した箱を、その位置から相対的に移動させる (offsetting する) 配置法を、 相対配置と呼びます。 >>6
[4] 相対配置される箱自体は一旦通常フローや浮動の処理モデルに従って位置の決定がなされますが、 その後すぐにずらして再配置されます。ですが、 相対配置される箱の相対移動はその後の箱の配置には影響を与えません。 後続の箱の配置に当たっては相対配置による箱の相対移動がなかったものとして計算されます。 CSS 2.1, >>6
[8] 従って、相対配置すると箱同士が重なることがあります。 >>6
[9] 相対配置される箱が 'overflow' が 'scroll'
や 'auto' の箱から溢れる位置に来る場合には、
利用者エージェントにはその相対配置される箱にも利用者がアクセスできるようにする
(スクロールバーを出す) 必要があります。 >>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'
でない値が指定されている状態は過制約であり、一方が無視されます。
どちらが勝ってどちらが無視されるかは包含ブロックの 'direction' によって決まります。
>>6
[14] 水平方向の場合と同様に、'top' や 'bottom'
で上や下に移動させることができます。左右を上下に読み替えると垂直方向の場合になります。
ただし、過制約な場合、 'top' が常に勝ち、
'bottom' の算出値は -'top' になります。
>>6
[10] 相対配置箱は包含ブロックを確立することがあります。 >>6 包含ブロックの項を参照してください。
[15] 行の高さの計算においては相対配置による移動は考慮されません。従って、 相対配置箱が行箱の外側にレンダリングされることは十分あり得ます。