ボックスの位置指定
(Box offsets)
ビジュアル
ホーム
>
CSS2 Note
> ボックスの位置指定
C2- ie4- N4-
説明
top:
top
;
C2- ie4- N4-
right:
right
;
C2- ie5- N6-
bottom:
bottom
;
C2- ie5- N6-
left:
left
;
C2- ie4- N4-
値:
----- hint -----
a b この順序で
a|b どれか1つ
a||b 少なくとも1つ
[...] グループ
a* 0回以上
a+ 1回以上
a? 0回、1回
{a,b} a回以上b回以下
<長さ>
|
<%値>
| auto |
inherit
初期値:
auto
、
適用要素:
ポジション要素(
position
プロパティの値がstatic以外の要素)
、
継承:
しない
、
%値:
包含ブロック
を参照
、
メディア:
ビジュアル
このプロパティは、
包含ブロック
の内辺から、指定した要素の
ボックス
のマージン外辺までの距離を指定します。
絶対配置(
position
:absolute)の場合、その
ボックス
の外辺の配置は
包含ブロック
の内辺に対して行われます。相対配置(
position
: relative)の場合、その
ボックス
自身の通常配置の外辺を基準とした相対的な位置指定が行われます。
位置指定には、負の値を指定することもできます。
使用例
#hint {position:absolute; top:100px; left:100px}
top right bottom left プロパティの値
長さ
C2- ie4- N4- 距離を指定。
%値
C2- ie4- N4-
包含ブロック
に対する割合で指定します。top、bottomは高さに対する割合、left、rightは横幅に対する割合で指定します。
包含ブロック
の値が明確でない場合は、「auto」として扱われます。
auto
C2- ie4- N6- CSSの算出方法によって自動的に調整されます。初期値。
positionのレンダリング
static (通常配置)
relative (相対配置)
absolute (絶対配置)
fixed (ウィンドウに固定して配置)
positionと包含ブロックとの関係
初期包含ブロック(ルート要素)との関係
staticな包含ブロック(block)との関係
staticな包含ブロック(inline)との関係
relativeな包含ブロック(block)との関係
relativeな包含ブロック(inline)との関係
absoluteな包含ブロック(block)との関係
absoluteな包含ブロック(inline)との関係
fixedな包含ブロック(block)との関係
fixedな包含ブロック(inline)との関係
ビジュアルによるカラム(フレームレイアウト)
floatプロパティによるカラム
floatプロパティによる3カラム
floatプロパティによる左カラム
floatプロパティによる右カラム
CSS2仕様書にあるposition:fixed;によるフレームレイアウト
関連項目:
display
|
position
| top right bottom left |
float
|
clear
|
z-index
|
direction
|
unicode-bidi
2005/09/22発行 2008/010/01更新