絶対配置と相対配置

IDとclass付けをする前に、positionタグについて説明します。絶対配置は容易に理解できると思いますが、相対配置はヒトによっては理解しづらいと思うので、ちょっと気を引き締めて聞いてください。

絶対配置（absolute）

絶対配置(absolute)というのは、パソコン画面左上を基点として、指定した座標に配置させることを意味します。

div {
	position:absolute;
	top:20px;
	left:20px;
	}

たとえば、下のようにdivでくくられたboxが並んでいるとします。

このうちdivAに対してposition:absoluteを指定すると、divAが画面左上を基点に、指定された座標に移動します。

divAのボックスが移動すると、それよりも下のボックスはdivAを無視してその分繰り上がって配置されます。

相対配置（relative）

一方、相対配置(relative)というのは、通常配置される場所を基点として、配置する方法です。

下記のhtmlとcssを実行してみると、このようになります。→サンプル

<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style7.1.css" media="all" />
</head>
<body>
<div id="a1">
<p>あいうえお</p>
</div>
<div id="a2">
<p>かきくけこ</p>
</div>
<div id="a3">
<p>さしすせそ</p>
</div>
</body>
</html>

div {
	border:solid 1px #000;
	width:200px;
	height:50px;
	}
div#a2 {
	position:relative;
	top:20px;
	left:20px;
	}

相対配置の一般的な使い方

相対配置を指定するrelativeタグは、実際に上の例のような使い方をするのはほとんどありません。（まったくないかもしれません・・・）

ではどんなときに使うのかと申しますと、「IE6のバグの対処」と「absoluteの基点変更」の2つのケースです。

「IE6のバグの対処」については、これ以降のlessonで述べることにして、ここでは、よく使う「absoluteの基点変更」について説明します。

下の図のような、divAを固定した上で、divaの位置を指定する場合に使用します。

div.A {
	position:relative;
	}
div.a {
	position:absolute;
	top:20px;
	left:20px;
	}

divAに対して、relativeを指定すると、基点がPC画面左上から、通常配置の時のdivAの左上に移動します。

その後に、divaをdivAの左上を基点に絶対配置させています。

この方法は、タイトルロゴの右に、サイト内検索ボタンやsitemapを置くときなんかに非常によく使われる手法です。

Lesson7～positionを使ったレイアウト～

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

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