Edit

Page

Page title:

Page body:

* [CODE(CSS)@en['position: relative']]

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

** 仕様書

- [2] [[CSS 2.1]]
-- <http://www.w3.org/TR/CSS21/visuren.html#propdef-position>

** 意味

[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]] 版) <http://www.w3.org/TR/CSS21/visuren.html#relative-positioning>

** レンダリング

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

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)