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文書の最上部に表示される。
position: absolute
Figure 1. position: absolute
fixed
position プロパティに fixed を指定した場合、top、right、bottom および leftで指定する位置は、表示領域のレイアウトにおける固定位置を示す。例えば、top: 0 の場合、表示領域の最上部に表示される。表示領域を下へスクロールしても、常に表示領域の最上部に表示される。
position: fixed
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 は、右端からの表示位置を指定します。通常、スタイルシート属性 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