CSS排版不得不知的祕訣（範例二）

當我們遇到活潑不規則的畫面 (指網頁中的物件上下左右無法對齊)
如 : 世界地圖

可以用 position 來解決問題
不需要擔心複雜的切版

先拿世界地圖來說，每個國家的位置不盡相同
1. 世界地圖當底圖 class 命名為 Map
2. 製作數個國家的 div, class 請命名為國家簡稱 ( 如 : Taiwan =TW)

Html
＜ div class="Map" ＞
　　＜ div class="TW" ＞台灣＜ /div ＞
　　＜ div class="CH" ＞中國＜ /div ＞
　　＜ div class="JP" ＞日本＜ /div ＞
　　＜ div class="US" ＞美國＜ /div ＞
　　＜ div class="DE" ＞德國＜ /div ＞
　　＜ div class="CZK" ＞捷克＜ /div ＞
＜ /div ＞

CSS

/*== 地圖 ==*/
.Map{
　　background-image:url(../images/global/map.jpg);
　　width:680px;
　　height:380px;
　　position:relative;

　　}

/*== 台灣 ==*/
.Map .TW{
　　position:absolute;
　　left:263px;
　　top:217px;
　　}

/*== 中國 ==*/
.Map .CH{
　　position:absolute;
　　left:231px;
　　top:188px;
　　}

/*== 日本 ==*/
.Map .JP{
　　position:absolute;
　　left:290px;
　　top:169px;
　　}

/*== 美國 ==*/
.Map .US{
　　position:absolute;
　　left:463px;
　　top:173px;
　　}

/*== 德國 ==*/
.Map .DE{
　　position:absolute;
　　left:15px;
　　top:145px;
　　}

/*== 捷克 ==*/
.Map .CZK{
　　position:absolute;
　　left:88px;
　　top:152px;
　　}

補充 :
在 Dreamweaver 可以直接拖拉製作好的 div


position:relative; 如同中心點
position:absolute; 如同座標 (0,0)

注意事項 :
1. 需延伸背景的網頁不適用
2. position:relative ，必須有寬度與高度