設定元素的矩形格子（box）之位置。用在 position 特徵設為 relative, absolute, fixed 時使用。
（一）當元素的 position 設為 absolute 或 fixed 時，此特徵指定元素外緣（margin）的底邊，距離包納區塊（containing block，通常是父矩格或是視窗）底邊的長度。也就是底邊到底邊的距離。
（二）當元素設為 position:relative 時，會先計算元素的正常位置，再向上移動 bottom 的值。此特徵可為負值。可設為：
- 長度：設定距離。
- 百分比：相對於包納區塊的高度的百分比。如果包納區塊沒有設定高度，而由內容決定高度，則百分比法如同 auto。
- auto：依據其它特徵決定高度，此為預設值。
- inherit：繼承父元素特徵。
正常位置。
- 風格用法：
<div style='width:250px; height:250px; background:#338'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div>
- 執行結果：
底邊到底邊的距離。父元素高度的 4%。
- 風格用法：
<div style='position:relative;width:250px; height:250px; background:#338'><img style='position:absolute; bottom:4%'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div> - 執行結果：
正常位置上移 bottom 的位移量。10px。
- 風格用法：
<div style='width:250px; height:250px; background:#338'><img style='position:relative; bottom:10px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div> - 執行結果：
（一）當 position 設為 absolute 或 fixed 時，此特徵指定元素外緣的左邊，距離包納區塊左邊的長度。也就是左邊到左邊的距離。
（二）當設為 position:relative 時，會先計算元素的正常位置，再右移 left 的位移量，以正常位置在左為正值。此時包納區塊是指父元素的矩格。此特徵可為負值。可設為：
- 長度：設定距離。
- 百分比：相對於包納區塊的寬度的百分比。如果包納區塊沒有設定寬度，而由內容決定寬度，則百分比法如同 auto。
- auto：依據其它特徵決定寬度，此為預設值。
- inherit：繼承父元素特徵。
左邊到左邊的距離。負10px。
- 風格用法：
<div style='position:relative; width:250px; height:250px; background:#338'><img style='position:absolute; left:-10px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHoHui01woBwkOdqFjwXKNEPsuk_t0yLFXO6PdJD_OO-fTyLAksb6JrIwm_E9aY-Lj5x7LkTxeu_450N-eutQiPei_C5uprpGOxv95ef9nZe7qrn_15MVUcLVoQ3sxRkggGNo_q9g_pA7/s200/absolute.JPG" /> </div> - 執行結果：
正常位置右移 left 的位移量。10px。
- 風格用法：
<div style='width:250px; height:250px; background:#338'><img style='position:relative; left:10px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHoHui01woBwkOdqFjwXKNEPsuk_t0yLFXO6PdJD_OO-fTyLAksb6JrIwm_E9aY-Lj5x7LkTxeu_450N-eutQiPei_C5uprpGOxv95ef9nZe7qrn_15MVUcLVoQ3sxRkggGNo_q9g_pA7/s200/absolute.JPG" /> </div> - 執行結果：
（一）當 position 設為 absolute 或 fixed 時，此特徵指定元素外緣的右邊，距離包納區塊右邊的長度。也就是右邊到右邊的距離。
（二）當設為 position:relative 時，會先計算元素的正常位置，再左移 right 的位移量，以正常位置在右為正值。此時包納區塊是指父元素的矩格。此特徵可為負值。可設為：
- 長度：設定距離。
- 百分比：相對於包納區塊的寬度的百分比。如果包納區塊沒有設定寬度，而由內容決定寬度，則百分比法如同 auto。
- auto：依據其它特徵決定寬度，此為預設值。
- inherit：繼承父元素特徵。
右邊到右邊的距離。10px。
- 風格用法：
<div style='position:relative; width:250px; height:250px; background:#338'><img style='position:absolute; right:10px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHoHui01woBwkOdqFjwXKNEPsuk_t0yLFXO6PdJD_OO-fTyLAksb6JrIwm_E9aY-Lj5x7LkTxeu_450N-eutQiPei_C5uprpGOxv95ef9nZe7qrn_15MVUcLVoQ3sxRkggGNo_q9g_pA7/s200/absolute.JPG" /> </div> - 執行結果：
正常位置左移 right 的位移量。10px。
- 風格用法：
<div style='width:250px; height:250px; background:#338'><img style='position:relative; right:10px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHoHui01woBwkOdqFjwXKNEPsuk_t0yLFXO6PdJD_OO-fTyLAksb6JrIwm_E9aY-Lj5x7LkTxeu_450N-eutQiPei_C5uprpGOxv95ef9nZe7qrn_15MVUcLVoQ3sxRkggGNo_q9g_pA7/s200/absolute.JPG" /> </div> - 執行結果：
（一）當 position 設為 absolute 或 fixed 時，此特徵指定元素外緣的上邊，距離包納區塊上邊的長度。也就是上邊到上邊的距離。
（二）當設為 position:relative 時，會先計算元素的正常位置，再下移 top 的位移量，以正常位置在上為正值。此時包納區塊是指父元素的矩格。此特徵可為負值。可設為：
- 長度：設定距離。
- 百分比：相對於包納區塊的高度的百分比。如果包納區塊沒有設定高度，而由內容決定高度，則百分比法如同 auto。
- auto：依據其它特徵決定高度，此為預設值。
- inherit：繼承父元素特徵。
上邊到上邊的距離。10px。
- 風格用法：
<div style='position:relative; width:250px; height:250px; background:#338'><img style='position:absolute; top:10px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div> - 執行結果：
正常位置下移 top 的位移量。負10px。
- 風格用法：
<div style='width:250px; height:250px; background:#338'><img style='position:relative; top:-10px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> </div> - 執行結果：
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {position:relative;
display:block;
background:red;
width:250px;
height:250px;
}
.hvr IMG {position:absolute;
top:25px;
left:25px;
border:none;
}
.hvr:hover {zoom:1; background:red;}
.hvr:hover IMG {top:0px; left:0px;}
.hvr:active IMG {top:50px; left:50px;}
</style> <a class=hvr href='javascript:void(0)'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' /> </a> - 執行結果：
- 上例使用 display:block 改造 ANCHOR 元素成為區塊元素。:active 在 IE6 的表現不佳。
- 在 IE6 必須有 .hvr:hover 這行，與 href='javascript:void(0)'，否則無法操作。
javascript 應用。可以用 style 物件 的特徵 top, right, bottom, left 作動態變化。此範例使用到 toggleCSS()。
- 風格用法：
<div style='position:relative; background:red; width:250px; height:250px'>射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. <img id='test' style='position:absolute'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg' /> </div><script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
}
toggleCSS("test", "top", "0px", "40px", 500);
toggleCSS("test", "left", "0px", "40px", 750);
</script> - 執行結果： 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 障礙遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
