CSS - position

トップ > CSSリファレンス > position

概要

属性名 position
static | relative | absolute | sticky | center | page | fixed
初期値static
適用可能要素テーブルカラムグループとテーブルカラムを除くすべての要素
継承継承しない
メディアVisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS24.0 ※11.01.04.01.0

※1 fixed は IE7 から。

説明

要素のポジショニングの方法を指定します。

説明
static通常の位置に配置されます。top, left, right, bottom属性は意味を持ちません。
relative要素が通常配置されるべき場所から、top, left あるいは right, bottom で指定されたオフセット分ずらされた場所に配置されます。ただし、このオフセットは、次の要素の配置に対しては影響を与えません。
absolute親要素が position:static のときはウィンドウの左上、親要素が position:static 以外の時は親要素の左上を基準位置とし、top, left あるいは right, bottom で指定されたオフセットの絶対位置に表示します。
stickytop と組み合わせて指定した場合、ページを下にスクロールして画面からはみ出しそうになったら、ページ上部に張り付きます。botttom と組み合わせて使用した場合はページの下部に張り付きます。Firefox でサポートされています。
center親要素が position:static のときはウィンドウ、親要素が position:static 以外の時は親要素の中央を基準位置とし、top, left あるいは right, bottom で指定されたオフセットの位置に表示します。
page未稿。
fixed通常の位置に表示されますが、ページをスクロースしても移動しません。

使用例

HTML
<h5>相対位置</h5>
<img src="../image/back.gif" alt="" style="position:static">
<img src="../image/back.gif" alt="" style="position:relative; top:10px">
<img src="../image/back.gif" alt="" style="position:static">
<h5>画面に対して絶対位置</h5>
<div>画面の右上に表示されています</div>
<img src="../image/back.gif" alt="" style="position:absolute; top:10px; right:10px">
<h5>親要素に対して絶対位置</h5>
<div style="position:relative; width:100px; height:60px; border:1px solid #666666">
  <img src="../image/back.gif" alt="" style="position:absolute; top:10px; right:10px">
</div>
表示
相対位置
画面に対して絶対位置
画面の右上に表示されています
親要素に対して絶対位置

関連項目

position, top, right, bottom, left, z-index

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月22日
http://www.tohoho-web.com/css/prop/position.htm