* [CODE(CSS)@en['position: relative']] [1] [[CSS]] の [CODE(CSS)@en['[[position]]']] [[特性]]の値 [DFN[[CODE(CSS)@en['[[relative]]']]]] は、[[箱]]を[[相対配置]]によって[[レンダリング]]することを示します。 ** 仕様書 - [2] [[CSS 2.1]] -- ** 意味 [3] [CODE(CSS)@en['[[position]]']] の値 [CODE(CSS)@en['[[relative]]']] は、 [[箱]]の[[位置]]が[[通常フロー]]に従って計算され、その後通常の位置から[[相対的]]にずらして配置されることを示します。 なお、[[通常フロー]]に従って計算した[[位置]]のことを[DFN[[RUBYB[通常フローでの位置]@en[position in normal flow]]]]といいます。 [SRC[[[CSS 2.1]]]] ** 関連 [5] [CODE(CSS)@en['[[position]]: [[relative]]']] が [CODE(CSS)@en['[[display]]']] が [CODE(CSS)@en['[[table-row-group]]']], [CODE(CSS)@en['[[table-header-group]]']], [CODE(CSS)@en['[[table-footer-group]]']], [CODE(CSS)@en['[[table-row]]']], [CODE(CSS)@en['[[table-column-group]]']], [CODE(CSS)@en['[[table-column]]']], [CODE(CSS)@en['[[table-cell]]']], [CODE(CSS)@en['[[table-caption]]']] の[[要素]]に指定されたときの動作は [[CSS 2.1]] では未定義とされています [SRC[[[CSS 2.1]]]]。 * 相対配置 [7] [[通常フロー]]や[RUBYB[[[浮動]]]@en[float]]によって配置した[[箱]]を、その位置から相対的に移動させる [WEAK[(offsetting する)]] 配置法を、 [DFN[[RUBYB[相対配置]@en[relative positioning]]]]と呼びます。 [SRC[>>6]] ** 仕様書 - [[CSS 2.1]] -- [6] [CITE@en[Visual formatting model]] ([TIME[2009-09-04 22:00:16 +09:00]] 版) ** レンダリング [4] [[相対配置]]される[[箱]]自体は一旦[[通常フロー]]や[[浮動]]の[[処理モデル]]に従って位置の決定がなされますが、 その後すぐにずらして再配置されます。ですが、 [[相対配置]]される[[箱]]の相対移動はその後の[[箱]]の[[配置]]には影響を与えません。 後続の[[箱]]の配置に当たっては[[相対配置]]による[[箱]]の相対移動がなかったものとして計算されます。 [SRC[[[CSS 2.1]], >>6]] [8] 従って、[[相対配置]]すると[[箱]]同士が[RUBYB[重なる]@en[overlap]]ことがあります。 [SRC[>>6]] [9] [[相対配置]]される[[箱]]が [CODE(CSS)@en['[[overflow]]']] が [CODE(CSS)@en['[[scroll]]']] や [CODE(CSS)@en['[[auto]]']] の[[箱]]から[RUBYB[溢れる]@en[overflow]]位置に来る場合には、 [[利用者エージェント]]にはその[[相対配置]]される[[箱]]にも[[利用者]]がアクセスできるようにする [WEAK[([[スクロールバー]]を出す)]] 必要があります。 [SRC[>>6]] *** 水平方向の移動 [11] [CODE(CSS)@en['[[left]]']] [[特性]]は[[右]]方向に、 [CODE(CSS)@en['[[right]]']] [[特性]]は[[左]]方向にどれだけ移動させるかを示します。 [SRC[>>6]] [WEAK[([[特性]]の名前と移動方向が異なることに注意してください。[CODE(CSS)@en['[[left]]']] は[[箱]]の左側にどれだけ空間を作るか (= どれだけ右側に移動するか) と考えると分かりやすいですね。)]] [12] [CODE(CSS)@en['[[left]]']] と [CODE(CSS)@en['[[right]]']] の[[算出値]]は常に [CODE(math)@en[[VAR[left]] = -[VAR[right]]]] となります。つまり、 [[相対配置]]によって[[箱]]の横幅が変わることはありません。 [SRC[>>6]] ,[CODE(CSS)@en['[[left]]']] の[[指定値]],[CODE(CSS)@en['[[right]]']] の[[指定値]],,[CODE(CSS)@en['[[left]]']] の[[算出値]],[CODE(CSS)@en['[[right]]']] の[[算出値]], ,[CODE(CSS)@en['[[auto]]']],==,→,[CODE(CSS)['[[0]]']],==,移動しない ,[CODE(CSS)@en['[[auto]]']],その他,→,[CODE(CSS)@en['[[right]]']] の[[指定値]] × -1,[[指定値]],左に移動 ,その他,[CODE(CSS)@en['[[auto]]']],→,[[指定値]],[CODE(CSS)@en['[[right]]']] の[[指定値]] × -1,右に移動 ,その他,その他,→,左右どちらかが勝つ >>13,==,== [13] [CODE(CSS)@en['[[left]]']], [CODE(CSS)@en['[[right]]']] の両方に [CODE(CSS)@en['[[auto]]']] でない値が指定されている状態は[RUBYB[[[過制約]]]@en[over-constrained]]であり、一方が無視されます。 どちらが[RUBYB[勝って]@en[win]]どちらが無視されるかは[[包含ブロック]]の [CODE(CSS)@en['[[direction]]']] によって決まります。 [SRC[>>6]] - [CODE(CSS)@en['[[ltr]]']] → [CODE(CSS)@en['[[left]]']] が勝ち、 [CODE(CSS)@en['[[right]]']] は -[CODE(CSS)@en['[[left]]']] - [CODE(CSS)@en['[[rtl]]']] → [CODE(CSS)@en['[[right]]']] が勝ち、 [CODE(CSS)@en['[[left]]']] は -[CODE(CSS)@en['[[right]]']] *** 垂直方向の移動 [14] [[水平]]方向の場合と同様に、[CODE(CSS)@en['[[top]]']] や [CODE(CSS)@en['[[bottom]]']] で[[上]]や[[下]]に移動させることができます。左右を上下に読み替えると垂直方向の場合になります。 ただし、[[過制約]]な場合、 [CODE(CSS)@en['[[top]]']] が常に勝ち、 [CODE(CSS)@en['[[bottom]]']] の[[算出値]]は -[CODE(CSS)@en['[[top]]']] になります。 [SRC[>>6]] ** 関連 [10] [[相対配置箱]]は[[包含ブロック]]を[[確立]]することがあります。 [SRC[>>6]] [[包含ブロック]]の項を参照してください。 [15] [[行]]の高さの計算においては[[相対配置]]による移動は考慮されません。従って、 [[相対配置箱]]が[[行箱]]の外側に[[レンダリング]]されることは十分あり得ます。