CSSのレイアウトテクニック - Faux Absolute Positioning

ネタ元：CSSレイアウトテクニック"偽装絶対指定"

久々にCSSでの面白いテクニックですね。

Faux Absolute Positioningについて細かい説明は原文の解説にまかせるとして、かいつまんで説明すると、float方向のネガティブマージンとposition:relativeのleft(right):100%を利用して擬似的に自由配置するというもの。

これを利用するとfloatのみでは再現不可能だったレイアウトが可能になります。

例えば、メインカラムを先に記述して、後にサイド部分を記述するというマークアップの3カラムのリキッドレイアウト。

リキッドレイアウトの為、メインカラムを100%にして、サイド部分にfloatで入り込める領域を作成しなくてはいけないのですが、floatとマージンによる制御だけではたぶん無理。

順序さえ変えれば、左右のネガティブマージンで対応できるのですが。

また、position:absoluteを利用しても可能ですが、コンテンツ量が多くなればbottomが生成するクリアランス領域を超えて描画されてしまいます。

Faux Absolute Positioningを利用すればmargin-left:-100%;でサイドがfloatで入り込める領域を作成することが可能なのでサイドも自由にfloatで配置することが可能に。

div#contents{
	width:100%;
	float:left;
	margin-left:-100%;
	position:relative;
	left:100%;
}

サンプル

ただ残念なことにIE6の再描画バグに対応する為、各パーツをdivで包んでhaslayoutをtrueにしてやらなくていけない。

サンプル

面白いテクニックですのでもう少し研究してみようと思います。

（勢いで書いたエントリーですので時間があるときにもう少し詳しい解説もしたいです）

スポンサードリンク

«Firefox3リリースされました。 | メイン | re:キケンなSQLインジェクション»