positionプロパティ

TOPページに戻る > CSS

positionプロパティ

要素の表示位置を指定できます
値には要素を独立させて表示できるrelative、ページ内で自由に配置できるabsolute、ブラウザ画面の中で固定されて表示されるfixedがあります。初期値はstaticです（staticは表示位置の指定なし）
位置をtopプロパティ、bottomプロパティ、leftプロパティ、rightプロパティで細かく指定できます

使い方（書式）

セレクタ { position: 値; }                                    

positionプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
static	positionの指定なし、初期値
relative	指定した要素の表示を独立させ、元の位置を基点として表示位置を指定できます
absolute	ページの中で自由に配置できるようになる
fixed	ブラウザの画面表示位置に固定される。スクロールしても動かない fixedはIE6が未対応。※IE7から対応

実際の指定方法

.hogebox{ 
 width: 600px;        /* 親boxの幅 */
 height: 350px;       /* 親boxの高さ */
 position: relative;  /* 親boxをレイアウトから独立させる */
 border: solid 1px;   /* 枠線を表示 */
 text-align: left;    /* テキストを左寄せ */
 margin: 20px auto ;  /* 親boxを中央寄せ */
}

.hoge {
 position: static;    /* 通常の要素の表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

.hoge2 {
 position: relative;  /* 元の位置を基点として表示位置を指定 */
 left:30px;           /* 元の位置の左から30pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

.hoge3 {
 position: absolute;  /* ページの内で自由に配置 */
 top:100px;           /* 親要素の上から100pxの位置に表示 */
 left:100px;          /* 親要素の左から100pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

.hoge4 {
 position: fixed;     /* 要素の位置を固定表示 */
 left:10px;           /* ページの左から10pxの位置に表示 */
 border: solid 1px;   /* 枠線を表示 */
  }

html部分

<div class="hogebox">
<div class="hoge">position: static;　初期値です</div>
<div class="hoge2">position: relative; left:30px;元の表示位置から30pxずらしました</div>
<div class="hoge3">position: absolute; top:100px; left:100px;
<br>親ブロック要素の左から100px、上から100pxの位置に配置
<br>親ブロック要素にposition: relative;を指定し、
<br>子ブロック要素にposition: absolute;を指定すると
<br>親ブロック要素を基点にして子ブロック要素の位置を指定できます
</div>
<div class="hoge4"><img src="maru.gif" alt="" width="50" height="50"></div>
</div>

positionのdemo

positionプロパティのdemo
relativeとabsoluteの違いを確かめてください

position demo

実際の表示

position: fixed;はページの左の画像を見ながらスクロールしてください