レンダリング
[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
'ltr' → 'left' が勝ち、 'right' は -'left''rtl' → 'right' が勝ち、 'left' は -'right'
垂直方向の移動
[14] 水平方向の場合と同様に、'top' や 'bottom'
で上や下に移動させることができます。左右を上下に読み替えると垂直方向の場合になります。
ただし、過制約な場合、 'top' が常に勝ち、
'bottom' の算出値は -'top' になります。
>>6