← 
 relative解説
 マウス操作で動くイラスト →
absolute ブラウザの左上(left:0;top:0;)を基点とし
<left>,<center>,<right>,<table>のhtmlタグに影響されない絶対位置
<div style="position:absolute;left:300;top:150;"><font color="#0000ff">動くイラスト</font></div>
 ← 動くイラストを青文字でブラウザの左上(left:0;top:0;)の基点から
left:300;top:150;の位置に表示



relative <left>,<center>,<right>,<table>のhtmlタグにより設定した位置を基点とし、
そこからの位置（参照位置）
<table border"1"><tr><td>
<div style="position:relative;left:300;top:150;"><font color="#0000ff">動くイラスト</font></div>
</td></tr></table>

← このセルが基点(left:0,top:0)になり、ここからleft:300;top:150;に動くイラストを表示
 ← 動くイラストを青文字でtableのセル位置を基点(left:0;top:0;)とし
そこからleft:300;top:150;の位置に表示



 absolute とrelativeの組み合わせ    absoluteで設定した位置を基点としrelativeで設定した位置  

←glass.gif

↓kingyo1.gif


↓water.jpg
absolute,relativeを使い３枚の画像を一つの画像にする

water.jpgのleft,topを決め、その位置を基点に、ブラウザ上
で重なりを確認しながら glass.gif , kigyo.gif それぞれのleft,
topを設定する




3つの画像を保存し、下のソースを全て選択、コピーし
拡張子をhtmlにし名前をつけて保存
実行してずれてたら、 glass.gif , kigyo.gif のleft,topを
変えてみる
（ブラウザによってleft,topが変わる）
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head>
<title>金魚</title>
</head>
<body>
<div style="position:absolute;left:100;top:500;">
<div id="rei3" style="position:relative;left:10;top:70;">
<img src="water.jpg"></div>
<div id="rei4" style="position:relative;left:0;top:-50;">
<img src="glass.gif"></div>
<div id="rei5" style="position:relative;left:10;top:-170;">
<img src="kingyo1.gif"></div>
</div>
</body>
</html>
 absoluteで、絶対位置 left=100,top=500を基点にし、
relativeで、それぞれの画像を配置