CSS position
CSSのpositionプロパティは、ボックスの位置を計算するために、どの位置決め方式を使用するかを決定します。
position
スタイルシート属性positionは表示位置を指定します。通常、以下のスタイルシート属性と組み合わせて使用します。
書式
position : absolute
position : fixed
position : static
position : relative
属性値
- absolute
- position プロパティに absolute を指定した場合、top、right、bottom および leftで指定する位置は、HTML文書全体のレイアウトにおける絶対位置を示す。例えば、
top: 0 の場合、HTML文書の最上部に表示される。
Figure 1. position: absolute
- fixed
- position プロパティに fixed を指定した場合、top、right、bottom および leftで指定する位置は、表示領域のレイアウトにおける固定位置を示す。例えば、
top: 0 の場合、表示領域の最上部に表示される。表示領域を下へスクロールしても、常に表示領域の最上部に表示される。
Figure 2. position: fixed
ヘッダーの位置を固定する例を以下に示す。
<header style="position: fixed; z-index: 1; right: .5rem">
<form action="https://google.com/cse" target="_top">
<input type="hidden" name="cx" value="xxxxxxxxxxxxxxxxx">
<input type="hidden" name="ie" value="UTF-8">
<input type="text" name="q" size="31" placeholder="サイト内検索">
<input type="submit" name="sa" value="検索">
</form>
</header>
位置が固定化されたヘッダーは、画面をスクロールしてもスクロールアウトされない。
- static
- 配置方法を指定しない。positionに「static」を指定した場合はtop、right、bottom又はleftを指定しても無視される。「static」はpositionのデフォルト値なので、positionを明示的に指定していない場合も同様である。
- relative
- 通常の位置からの相対位置
top
スタイルシート属性 top は、上端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。
書式
top : auto
top : length
top : percentage
属性値
CSS の top プロパティには、以下に示すいずれかの値を指定できる。
- auto
- ユーザーエージェントが自動的に位置を決定する。
top: auto;
- length
- 上からの位置を絶対値で指定する。以下に示す単位を利用できる。
単位
| 単位 |
意味 |
説明 |
| em |
|
フォントサイズ |
| rem |
root em |
ドキュメントのルート要素のフォントサイズ |
| cm |
centimeters |
1cm |
| mm |
millimeters |
1mm |
| Q |
級 (quarter-millimeters) |
0.25mm |
| in |
inches |
1 inch |
| pc |
picas |
1/6 inch |
| pt |
points |
1/72 inch |
| px |
pixels |
1/96 inch |
| vw |
viewport width |
ビューポートの幅の1/100 |
| vmin |
minimum viewport |
ビューポートの幅または高さで小さい方の1/100 |
| vmax |
maximum viewport |
ビューポートの幅または高さで大きい方の1/100 |
top: 1rem;
- percentage
- 上からの位置を親要素に対するパーセンテージで指定する。
top: 50%;
初期値
auto
継承
しない
使用例と表示サンプル
次にtopスタイルシート属性を使用したHTMLの例を示します。
通常位置から<span style="position: relative; top: 0.5em">0.5文字分下げる。</span>
通常位置から0.5文字分下げる。
right
スタイルシート属性 right は、右端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。
書式
right : auto
right : length
right : percentage
属性値
CSS の right プロパティには、以下に示すいずれかの値を指定できる。
- auto
- ユーザーエージェントが自動的に位置を決定する。
right: auto;
- length
- 右からの位置を絶対値で指定する。以下に示す単位を利用できる。
単位
| 単位 |
意味 |
説明 |
| em |
|
フォントサイズ |
| rem |
root em |
ドキュメントのルート要素のフォントサイズ |
| cm |
centimeters |
1cm |
| mm |
millimeters |
1mm |
| Q |
級 (quarter-millimeters) |
0.25mm |
| in |
inches |
1 inch |
| pc |
picas |
1/6 inch |
| pt |
points |
1/72 inch |
| px |
pixels |
1/96 inch |
| vw |
viewport width |
ビューポートの幅の1/100 |
| vmin |
minimum viewport |
ビューポートの幅または高さで小さい方の1/100 |
| vmax |
maximum viewport |
ビューポートの幅または高さで大きい方の1/100 |
right: 1rem;
- percentage
- 右からの位置を親要素に対するパーセンテージで指定する。
right: 50%;
初期値
auto
継承
しない
使用例と表示サンプル
次にleftスタイルシート属性を使用したHTMLの例を示します。
通常位置から<span style="position:relative; right:2em">2文字分左にずらす。</span>
通常位置から2文字分左にずらす。
<div style="position:absolute; right:50px">左から50ピクセル離す</div>
左から50ピクセル離す
left
スタイルシート属性 left は、左端からの表示位置を指定します。通常、スタイルシート属性 position と組み合わせて使用します。
書式
left : auto
left : length
left : percentage
属性値
CSS の left プロパティには、以下に示すいずれかの値を指定できる。
- auto
- ユーザーエージェントが自動的に位置を決定する。
left: auto;
- length
- 左からの位置を絶対値で指定する。以下に示す単位を利用できる。
単位
| 単位 |
意味 |
説明 |
| em |
|
フォントサイズ |
| rem |
root em |
ドキュメントのルート要素のフォントサイズ |
| cm |
centimeters |
1cm |
| mm |
millimeters |
1mm |
| Q |
級 (quarter-millimeters) |
0.25mm |
| in |
inches |
1 inch |
| pc |
picas |
1/6 inch |
| pt |
points |
1/72 inch |
| px |
pixels |
1/96 inch |
| vw |
viewport width |
ビューポートの幅の1/100 |
| vmin |
minimum viewport |
ビューポートの幅または高さで小さい方の1/100 |
| vmax |
maximum viewport |
ビューポートの幅または高さで大きい方の1/100 |
left: 1rem;
- percentage
- 左からの位置を親要素に対するパーセンテージで指定する。
left: 50%;
初期値
auto
継承
しない
使用例と表示サンプル
次にleftスタイルシート属性を使用したHTMLの例を示します。
通常位置から<span style="position: relative; left: 5em">5文字分右にずらす。</span>
通常位置から5文字分右にずらす。
関連記事
CSS の bottom プロパティ
参考文献
The World Wide Web Consortium (2022) CSS Positioned Layout Module Level 3