テーマ開発ドキュメント（Ver2用）

デザイン上、ある要素を「この場所に表示したい」と決めうちすることも少なくありません。このときに必要になるのが absolute による位置指定です。

absoluteの使い方

先に例を示してみましょう。

<div style="position: relative; height: 60px;">
<div style="margin-left: 200px;">margin-left: 200px;</div>
<div style="position: absolute; top: 0; width: 180px; border: 1px solid red;">
position: absolute;<br>top: 0;<br>width: 180px;</div>
</div>

として表示させると*1

margin-left: 200px;

position: absolute;
top: 0;
width: 180px;

となります。これはサイドバーの表示に使っている手法です。

親要素中の、position: relative;となっているものの（なければ表示領域中の）左上座標基準として、そこからの位置を position: abosluteとした上で top や left プロパティ使って指定します。

aboslute は非常に強力であり、各要素を HTMLの出現順序に関わらず自由な位置に配置することができます。