OR
誰でも自由に記事を投稿・編集できるオープンリファレンス
記事ID:193
区分:プログラム  |  分類:HTML/CSS  |  最終更新日:2014/06/29
クリエイティブ・コモンズ 表示-継承ライセンス 2.1
【CSS】positionプロパティ(配置方法の指定)
関連タグ:html, css, カスケーディングスタイルシート, ホームページ, ボックス, ポジション, 位置指定, top, right, bottom, left
このエントリーをはてなブックマークに追加      
本文
履歴
編集
閲覧数: 2,378
【CSS】プロパティ一覧 > 【CSS】positionプロパティ(配置方法の指定)

CSS(カスケーディング・スタイル・シート)のプロパティの一つ。
ボックスの配置方法を指定する為のプロパティです。 通常、ボックスはこのプロパティで配置方法を指定し、場合によっては、top, right, bottom, left プロパティで各辺からの距離を指定して細かい位置の指定を行います。 このプロパティに設定できる値は以下になります。

 

【プロパティの値一覧】

説明
static [静止] 標準の配置。初期値でもあり、ボックスの配置位置は、隣接するボックスとの関係によって決まります。(top, right, bottom, left プロパティの値は無視されます)
relative

[相関] 標準の配置を基準とした相対的な配置。 標準の配置(static)を基準とし、そこからの距離を相対的に指定して配置します。

absolute [絶対] ウィンドウまたは親ボックスを基準とした絶対的な配置。 親ボックスが「static」以外の配置をしていた場合は親ボックスを、それ以外はウィンドウの左上を基準とし、そこからの絶対的な距離を指定して配置します。
fixed [固定] ウィンドウを基準とした絶対的な配置。 常にウィンドウの左上を基準とし、そこからの絶対的な距離を指定して配置します。 ウィンドウを基準としている為、ページをスクロールさせてもこの値が指定されたボックスはスクロールせず、画面上に固定されたように表示されます。

 

上記表のように「static」以外の値を設定した場合、指定のボックスは基準となる点が決められ、そこからの距離を、top, right, bottom, left プロパティによって指定することで配置位置を任意に指定することができます。

 

【サンプルコード】

position: absolute;
top: 20px;
left: 100px;

※ 上記サンプルは配置方法を「絶対位置(absolute)」にし、上から 20px、左から 100px の位置に配置するように指定しています。

プロパティ仕様

書式

position: 値;

適用対象 全ての要素(※1
継承の有無 継承しない
メディア visual
CSSレベル CSS2
初期値 static
説明
static [静止] 標準の配置。(初期値)
relative

[相関] 標準の配置を基準とした相対的な配置。

absolute [絶対] ウィンドウまたは親ボックスを基準とした絶対的な配置。
fixed [固定] ウィンドウを基準とした絶対的な配置。

※1 生成内容は除外されます。

関連プロパティ

このプロパティに関連する配置指定関係のプロパティは以下になります。

 

  • top(上からの距離の指定)
  • right(右からの距離の指定)
  • bottom(下からの距離の指定)
  • left(左からの距離の指定)

注意事項

  • IE6 以下では「fixed」に対応していません。 また、IE7 以上でも表示モードが「標準モード」の場合にのみ機能します。

サンプルコード

.sample1 {
position: fixed;
top: 10px;
left: 20px; }

※ 上記サンプルでは「fixed」が指定されているため、指定のボックスは画面に対して常に上 10px、左 20px の位置に配置されます。

関連記事
関連記事はありません。
外部リンク
- 記事検索 -