positionプロパティ

positionを使うと、ある任意のブロックに対して配置を指定することができます。

好きな位置に配置することができるので大変便利と思いきや、ディスプレイの解像度が多々あるため、自分の22インチで中央に配置したと思っても、別のディスプレイでは左よりだったりとこれで全てのレイアウトを行うことは推奨できません。

positionの要素には、absolute(絶対配置)、relative(相対配置)、fix(固定配置)があります。(IE5,6はfixをサポートしていません→ここ重要→サポートさせるjsファイルはあります。）

/* CSS */
.a1 {
	position:absolute;　/* 絶対配置 */
	left:0;
	top:0;

	position:relative;　/* 相対配置 */
	left:0;
	top:0;

	positon:fix;　/* 固定配置 */
	left:0;
	top:0;
	}

絶対配置と相対配置の違いですが、絶対配置とは通常の配置とは無関係にある基点に対する座標を示します。

例えば、divのboxがdivA、divB、divCの3つあったとして、divAの中にはもっと小さなboxのdivaがあり、divbの中にもdivbがあるとします。

divAを絶対配置させると、divBとdivCが繰り上がって上に来ます。divBを絶対配置させると、divAはそのままでdivCが繰り上がって上に来ます。

最初は基点が画面左上の(0,0）なのでそこから動かしたい距離を指定します。

相対配置とは、通常の配置に対する座標です。通常の配置というのは、下図でいう破線で囲ってある本来あるべき場所のことです。

絶対配置と相対配置を同時に使う場合を取り上げて見ます。positionはこの方法以外ではほぼ使わないので必ず理解してください。

/* CSS */
div.A {
　　　　position:relative;
　　　　}
div.a {
	position:absolute;
　　　　left:10;
　　　　top:20;
　　　　}

この例では、divAに対して相対配置を座標なしで指定していますが、これは、ここを基点としますということです。

また、divaに対して絶対配置を指定していますが、これは、divAという動かないボックスの中をdivAを基点に自由動くということです。

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>