CSS の position の absolute を使いこなす為の基礎知識

まず position プロパティについて簡単に説明すると、position プロパティとは要素の配置方式を指定し、それぞれの配置方式によって配置する位置を指定できるプロパティです。つまり CSS でレイアウトを行う上で、要素の位置を決めるためのプロパティであり top、right、left、bottom の位置プロパティと併せて使用します。
配置方式（position プロパティの「値」）には以下のものがあります。

• absolute … 親の要素が static 以外の値を持っている時、親の左上を基準として位置プロパティ通りに配置する方式。
• relative … 本来配置されるべき位置からの移動距離を位置プロパティを使い配置する方式。
• fixed … absolute と同じ条件で配置する位置を決める方式だが、スクロールアウトせず常に同じ位置を保つ配置方式。
• static … 初期値であり、この値が適用されると位置プロパティでの指定が無効となる配置方式。

上の position プロパティの「値」の説明で今回重要なのが赤い部分です。
実は先日まで私は absolute は常にブラウザのウィンドウの左上が基準となると解釈（勘違い）していたのですが、それは static つまり初期値の時の基準であり、各要素に static 以外の値を持たすことで親要素の左上を基準として配置できるのです。

それでは下の図をご覧ください。

上の図はブラウザのウィンドウを現していて、赤い矢印は親要素が初期値の時に absolute の基準とする位置です。図中のウィンドウ中央にあるグレーのボックスにも書かれている通り position : relative; を指定すると、その中にある子要素の absolute は青い矢印の位置を基準とします。
※位置プロパティで right、bottom を使用すると矢印の位置は右下を基準としますが、基本的には左上が基準です。

上記の内容を理解すると、例えば ul 要素を使ったメニューボタンをレイアウトする時など li 要素を absolute で配置できます。その時、ul 要素に relative の値を持たせる訳ですが、位置プロパティは省略可能です。ul 要素の左上から li 要素を px 単位で配置できるのです。

もっと簡略できますが下がサンプルソースです。

ul {
	width : 600px;
	height:60px;
	list-style:none;
	position:relative;
}

li#btn1 {/*左ボタン*/
	width : 200px;
	height : 60px;
	position : absolute;
	top : 0;
	left : 0;
}

li#btn2 {/*中ボタン*/
	width : 200px;
	height : 60px;
	position : absolute;
	top : 0;
	left : 200px;/*左ボタンの width だけズラす*/
}

li#btn3 {/*右ボタン*/
	width : 200px;
	height : 60px;
	position : absolute;
	top : 0;
	left : 400px;/*左ボタンと中ボタンの width の和だけズラす*/
}

これは私にとってとても便利なレイアウト方法でした。

今迄は li 要素を display : block; とし float で並列させていました。テキストメニューを単純に並列するには display : inline; とすれば良いのですがメニューボタンとしてクリック領域を大きく取りたい時には li 要素をブロックレベル要素にし float させていました。結果は同じなんですが、float 指定をすると予期せぬ問題が発生することも少なくなく、また CSS 内のソースも複雑になりがちでした。

まだ私も position プロパティを使いこなしていると言うレベルではありませんが、デザインを考える時の肩の荷が下りた基礎知識でした。まだまだ日々勉強だなと思うと共に、リファレンス的な本をこうして読み返すことの必要性、基礎知識の大切さを実感しました。