「あやの独り言」のあやちゃん作。。（*￣m￣)ぷっ！なかなかおもしろい！
だるまがナハナハをやっている。（*￣m￣)ぷっ！（*￣m￣)ぷっ！
◆
これは、ｉｍｇタグで表示しただけで動くアニメーションｇｉｆ画像です。
この画像をさらにＪＡＶＡスクリプトで動かすことも出来ます。
「文字や画像を動かす。その２」では、スタイルシートの
position:relativeを使って、画像や文字の表示する位置を決めていました。
これは、そのＨＴＭＬで表示される場所が、基準の位置になります。（基準の位置は、
left:0px;top:0px)
つまり、ＨＴＭＬで表示する場所が決まります。
◆
|
例えば、ＨＴＭＬのソースに、今読んでいるこの文章のあとに、改行して<br>
<span style="position:relative;left:0px;top:0px">
<img src="pic/daruma_nahanaha.gif" width="48" height="64" border="0">
</span>を書くと、この場所に表示されます。
|
と、このように書くと、下のように表示されます。
例えば、ＨＴＭＬのソースに、今読んでいるこの文章のあとに、改行して
を書くと、この場所に表示されます。
本来、ｉｍｇタグで普通に表示される位置に画像が表示されています。
◆
それに対して、
position:absolute;left:0px;top:0pxを指定した場合、ＨＴＭＬを無視して、ページの左上の隅が基準（
left:0px;top:0px）の位置になります。
<span style="position:absolute;left:0px;top:0px">
<img src="pic/daruma_nahanaha.gif" width="48" height="64" border="0">
</span>
というふうに、ＨＴＭＬのどこに書いても、左上の隅に表示されます。
それが左上にある、だるまのナハナハです。（このページの１番上の左を見てください。）
◆
このように、
position:absoluteと、
position:relativeでは、表示される位置に特徴があります。
次は、ｌｅｆｔとｔｏｐの指定のしかたです。
ｌｅｆｔ、ｔｏｐ共に、基準となる位置は０です。
ｌｅｆｔの場合、指定した数値が増えるほど、右に表示されます。
ｔｏｐは指定した数値が増えるほど、下に表示されます。
↑
top:-100px
↑
↑
↑
↑
↑
↑
↑
↑
|
 |
基準の位置 |
|
 |
|
←left:-100px←←←←
|
|
left:0px→→→→left:100px→→→→left:200px→→→left:300px→→→
top:0px
↓
↓
↓
↓
↓
↓
↓
top:100px
↓
↓
↓
↓
↓
↓
↓
↓
top:200px
↓
↓
↓
↓
↓
↓
↓
↓
|
ｌｅｆｔは数値が少ないほど、左に表示されます。
マイナスも指定できます。
ｔｏｐは数値が少ないほど上に表示されます。
マイナスも指定できます。
このことは
position:absoluteと、
position:relativeに共通です。
ただ、基準となる位置が違うだけです。
◆
もし、画像を一つ表示させるとしたら、ｌｅｆｔ、ｔｏｐで指定した位置は、その画像の左上の１点の位置を示しています。
そして、画像を動かすと言うことは、このｌｅｆｔとｔｏｐの数値を変えて、画像の表示する位置を変えると言うことなのです。