■テキストや画像を好きな場所に配置する
position:absolute:(ポジショニングプロパティの絶対位置指定)のキホンについて解説。
好きな場所に好きなものを配置したいときは<div style=" position: absolute ;">〜<div>を使います。
ピクセル単位の微妙なデザインを可能にするposition:absolute:はWebデザインには不可欠なプロパティ,値です。
また、HTMLではテキストや画像の表示位置が重なる場合後から書かれた方が回り込み表示されます。
しかしabsoluteを使えば全ての制限がなくなり、top,leftで指定した場所に必ず表示されることになります。
もちろん画像ファイルに直接指定することも可能です。
◆position: absolute の説明
positionは位置を指定するプロパティ
absoluteは絶対位置を示す値
開始位置はウィンドウの左上でtop,leftで開始位置を指定する
width,heightでテキストエリアのサイズを指定します。(指定しない時はテキストに合わせて拡張)
(例)ウィンドウから縦100px,横100pxの位置に指定する
<div style="position:absolute;top:100px;left:100px;">
(例)テキストエリアを横500px,縦は任意に設定する
<div style="position:absolute;width:500px">テキスト</div>
(例)画像をウィンドウの縦100px,横100pxの位置に指定する
<img src="../../image.jpg" style="position:absolute;top:100px;left:100px;">