| 記述例 |
|
| <div style="position: relative;"><img src="img/HP_HTML_000004.png" width="300" height="300"
border="0" alt="日本周辺地図"> |
|
<div style="position: absolute; top : 213px; left : 150px;"><b>西之島</b></div>
<div style="position: absolute; top : 220px; left : 203px;"><img src="img/HP_HTML_000005.png" width="12" height="12"
border="0" alt="西之島"></div> |
| </div> |
|
| 解説 |
|
<div style="position: relative;"> ～ </div> |
|
ベース（背景）となる画像 （HP_HTML_000004.png ： 日本周辺地図） の表示位置が、他の画像表示位置と関連性を持つこと （<style="position: relative;">） を宣言しておきます |
| <div style="position: absolute; top : 213px; left : 150px;"> ～ </div> |
|
その上（前面）に表示する文字列 「西之島」 を、ベース画像が存在する <div> 領域 （<div style="position: absolute;">） の左上から top : 213px; left : 150px; の位置に表示するよう指定しています |
| <div style="position: absolute; top : 220px; left : 203px;"> ～ </div> |
|
その上（前面）に表示する画像 （HP_HTML_000005.png ： 西之島（赤丸）） を、ベース画像が存在する <div>
領域 （<div style="position: absolute;">） の左上から top : 220px; left : 203px; の位置に表示するよう指定しています |
| 表示例 |
|
西之島
|
