要素を相対配置する
要素は、通常はページの流れの中の自然な位置に置かれます。この元の位置を基準にして要素を移動することを「相対配置」と言います。相対は位置を指定するには、positionプロパティにrelativeを設定します。相対配置の場合、周囲の要素には全く影響がありません。
1. position:relative と入力します。 (セミコロンも忘れずに入力します)
2. top、right、bottom、leftと入力します。 それぞれ上、右、下、左に移動することを示します。
3. :v と入力します。 vの部分には、もともとの位置からの移動距離(絶対値または相対地)を単位つきで入力します。(10pxなど)
4. 必要であれば、; (セミコロン)を入力して 2.〜3.を繰り返し、別の方向への移動距離を指定します。
・上の3.では絶対値又は相対地のどちらかを入力します。単位は、相対単位と絶対単位の2種類に分類されます。
相対単位
em:要素のフォントサイズ値を表します。
ex:関連フォントの「x-height」(各フォントで定義されていて、小文字のxに近い高さ)を表します。
px:ピクセル、表示に使う装置の解像度を表します。
絶対単位
in:インチ(1in=2.54cm)
cm:センチメートル
mm:ミリメートル
pt:ポイント(1/72in)
pc:パイカ(1pc=12pt)
・相対配置では、親要素ではなくその要素自信のもともとの位置が基準となります。ほかの要素に対して相対的に要素を移動することはできません。要素は、自分自身の本来の位置に対して相対的に移動します。
・相対配置を指定してもほかの要素には影響ありません。ほかの要素はその要素を含むボックスを基準に配置されます。要素同士がかさなることもあります。
・テキストをほかの要素の周りに回りこませるには、その要素を相対配置する必要があります。