positionプロパティ(ボックスの配置方法 / 基準位置)

positionプロパティを利用して要素の配置方法を指定できる。
配置を指定する場合、値は以下のキーワードで指定できる

1)static(通常配置)
XHTMLレイアウト規則に従って決められた座標系。
※top,right,left,bottom の各プロパティを指定しても無効
2)relative(相対配置)
直前のブロックタグが原点[0.0]の座標系。
3)absolute(絶対配置)
画面左上が原点[0.0]の座標系、スクロールでも移動する。
4)fixed(固定配置)
画面左上が原点[0.0]の座標系、スクロールでも移動しない。

positionプロパティの値が「static」でない場合、位置指定には以下のプロパティが使用できる。値は長さ、割合、autoを指定する。

  1. 1. top
  2. 2. right
  3. 3. bottom
  4. 4. left

書き方:

要素名 {
	position : 値(キーワード);
	topなどの位置指定 : 値(長さ、割合、auto); 
}


例:h1要素を絶対配置で、その要素本来の位置からの上辺から40ピクセル、左辺から200ピクセルに配置する。

h1 {
	position : absolute ;
	top : 40px ;
	left : 200px ;
}

go to top