配置の指定　absolute　relative

ホームページビルダーにある「どこでも配置モード」がこれです。これは position 属性単独で使うものではなく、 top・bottom・right・left 属性と組み合わせて、例えば上から50px・左から30px の位置に画像を配置する などの使い方が出来ます。

また position:absolute は絶対配置で、 position:relative は他のタグの影響を受ける相対配置になります。

HTMLページの左上の角を top:0px left:0px として画像やテキストを絶対配置していくのが、ホームページビルダーの 「どこでも配置モード」と同じになり、作るのは簡単ですがページを更新するのが面倒という側面をもちます。

position は単独で使う属性ではない分使い方がややこしいので、最後に使い方を載せておきます。

上からの配置指定　<lenght>　<%>

上からの距離を指定した配置。

下からの配置指定　<lenght>　<%>

下からの距離を指定した配置。

右からの配置指定　<lenght>　<%>

右からの距離を指定した配置。

左からの配置指定　<lenght>　<%>

左からの距離を指定した配置。

下の薄いグレーのボーダーで囲まれた部分をHTMLページとした場合の書き方。



上をソースで表示すると下のようになります。オレンジ色はポジションに関する部分です。

<span style="position:absolute;top:10px;left:20px;font-weight:bold;color:#00a0ff">
■ 有名な海水魚シリーズ
</span>

<img src="image/fish1.png" style="position:absolute;top:45px;left:10px;">

<div style="border:1px solid #88bbff;width:200px;height:100px;padding:10px;position:absolute;top:40px;left:140px;">
このハタタテダイは海水魚で、形が似ている?エンゼルフィッシュは淡水魚です。
珊瑚礁の海をイメージした時に連想される代表的な綺麗な魚です。
</div>

<div style="border:1px solid #ffcc88;width:130px;height:100px;padding:10px;position:absolute;top:40px;left:350px;">
インド洋〜中部太平洋の暖かい水域沿岸に住み、日本でも西日本を中心に見られます。
</div>

<div style="border:1px solid #88cc88;width:480px;height:100px;padding:10px;position:absolute;top:160px;left:10px;">
珊瑚礁に住む色とりどりの魚は観賞用にされます。
ハタタテダイ・コバルトスズメ・チョウチョウウオ・
ディズニーの映画で一気に人気になったクマノミなど。
しかし淡水魚に比べると海水魚の管理は難しいようで、
初心者は魚を買ってきてもすぐに死んでしまうようです。
慣れるまでは安い魚で練習しましょう・・・。
生き物で飼う練習をしても良いのか？
</div>

ホームページビルダーの普及でポジションによるホームページ作成される方が増えていますが、 ポジションは絶対的な配置になるので、画像のサイズやテキストを入れたブロック体の大きさが変ると、 それ以降にある内容物のポジションを直さないとおかしな表示になります。

例えばテキストが1行増えたらその1行分、そこから下に配置されている内容物の位置を下げる必要があるのです。 それをしないと1行増えたところが重なって表示されたりします。

また文字サイズをブラウザで変更されてもテキストなどが重なってしまう場合があるので、 そ言う面から、ポジションによるホームページは更新に向かないと思われます。
ホームページビルダーで作る場合は、「どこでも配置モード」ではなく「通常モード」をおすすめします。