position/表示位置

positionプロパティを使うと表示位置を指定出来ます。

説明

 positionとtop、right、bottom、leftを組み合わせて文字や画像を親ボックスの左からどの位の位置、ページ内でどの位置、ウィンドウ上でどの位置に表示するか設定出来ます。

position説明

 positionが親ボックス、ページ、ウィンドウのどれを基準にするかの指定で、top等がその位置の指定です。

構文

 positionプロパティの構文は以下の通りです。

position: 基準;

 基準は以下が指定出来ます。

【基準の指定】
基準 説明
static 親ボックス左上に表示(デフォルト)
relative 親ボックスを基準
absolute ページ(絶対位置)を基準
fixed ウィンドウを基準

 topプロパティの構文は以下の通りです。

top: 単位指定;

 単位指定の例は以下の通りです。

【単位指定の例】
単位指定 説明
auto 自動(デフォルト)
% 割合
em 文字数
px ピクセル

 right、bottom、leftについても同様です。

positionのstatic利用例

 positionのstatic利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
position: static;
}

<div>static</div>

 上記を表示すると以下になります。尚、分かり易さのため背景色を付けて、点線の枠ではheightで70pxを指定しています。

static

 左上に張り付きます。top、right、bottom、leftは使えません。

 尚、relative、absolute、fixedで各top、right、bottom、leftにautoを指定した場合もこの位置に表示されます。

 つまり、autoがデフォルトのため、指定しないとこの位置になります。

positionのrelative利用例

 positionのrelative利用例は以下の通りです。

div {
position: relative;
top: 10px;
left:10em;
width:100px;
}

<div>relative</div>

 上記を表示すると以下になります。同様に点線の枠ではheightで70pxを指定しています。

relative

 親ボックスの上から10px、左から10文字の間を空けて表示されます。

 marginやpadding等でも余白を設定出来ますが、通常は親ボックスの右からはみ出ない範囲を保ちます。

 positionでrelativeを指定してズラすと、単純に移動するため、上記のように幅を指定していないと右からはみ出る可能性があります。

positionのabsolute利用例

 positionのabsolute利用例は以下の通りです。

div {
position: absolute;
left:50%;
}

<div>absolute</div>

 上記を表示すると以下になります。

absolute

 画面のブラウザの中央から表示が開始されていると思います。上記ではleftで50%を指定しているため、ほぼ中央に表示されます。

 以下はJavaScriptを利用した例です。「表示」をクリックしてページトップまで戻ると大きな字で「このようにページトップに表示されます。」と表示されています。この文字は実際はこのすぐ下に記述していて非表示にしていますが、ボタンを押すと表示に変えて、position: absolute;top:0px;を指定しているため、ページトップに表示されます。

 「非表示」をクリックすると表示が消えます。

 absoluteはページを基準とした絶対値なので、どこでも表示出来ますが、文章が長くなると指定が難しくなります。

positionのfixed利用例

 positionのfixed利用例は以下の通りです。

div {
position: fixed;
top:0px;
}

<div>ブラウザウィンドウトップに表示され続けます。</div>

 上記を表示させるとブラウザ画面内の上部に張り続けます。このため、JavaScriptを利用した例を示します。「表示」をクリックすると「ブラウザウィンドウトップに表示され続けます。」と表示され、ブラウザをスクロールしてもブラウザ画面内のトップに表示され続けます。「非表示」をクリックすると表示を消せます。

 この文字は実際はこのすぐ下に記述していて非表示にしていますが、ボタンを押すと表示に変えて、position: fixed;top:0px;を指定しているため、ブラウザウィンドウ内トップに表示されます。

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)