画像をページの中央に表示する(hint: margin: 0 auto;)。
このページのソースをみて、HTMLのタグで指定されている要素がどのように配置されているかを確認しましょう。
div要素は４つあります。それらの階層構造は以下のようです。
div [width: 550pxで、全体を中央揃えにするためのブロック]
|
+--- div [style="position: relative;"として、座標の原点を合わせるためのもの]
|
+--- img [背景の画像のbackground.png(width: 500px; height:500px;)を表示]
|
+--- div [id=Nezumi1]
| |
| +--- img [ねずみの画像のnezumi.png(width: 64px; height:64px;)を表示]
|
+--- div [id=Nezumi2]
|
+--- img [ねずみの画像のnezumi.png(width: 64px; height:64px;)を表示]
div要素の境界線を赤くして、それぞれのdiv要素がどこに表示されているかを確認するために、下のボタンをクリックしてみましょう。
ねずみの画像は、div(id=Nezumi1)とdiv(id=Nezumi2)の子要素になっています。 div(id=Nezumi1)とdiv(id=Nezumi2)の各々のleftとtopプロパティを変更することで、表示位置を変更できます。
leftとtopプロパティは、div(id=Nezumi1)とdiv(id=Nezumi2)の各々のstyle属性でインラインで指定していますので、その数値を変更することで、leftとtopプロパティが変更されます。