設定元素的矩形格子（box）之位置，通常會配合 top, bottom, left, right 四個特徵使用。可設為 static, relative, absolute, fixed：
（一）static：依照正常流程佈局，top, bottom, left, right 四個特徵失效。此為預設值。
- 風格用法：
<div style='width:250px; height:250px; background:#338'><img style='bottom:20px; right:20px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> <span>好玩遊戲，射擊遊戲，益智遊戲，賽車遊戲，武打遊戲，線上遊戲，戰爭遊戲。</span> </div> - 執行結果：
好玩遊戲，射擊遊戲，益智遊戲，賽車遊戲，武打遊戲，線上遊戲，戰爭遊戲。
（二）relative：先計算元素矩格的正常位置，再加上 top, right, bottom, left 設定的相對距離，而得到最後的位置。請參考各特徵的詳細說明。其後的元素矩格會忽略它，而依原有的流程佈局，所以 relative 的矩格可以重疊。
- 風格用法：
<div style='width:250px; height:250px; background:#338'><img style='position:relative; bottom:-60px; right:20px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkRzQhhtbzJZB2AZE3Ud_K4poNGAX7hjwO2OoBd8SNHhRMffYRfw9qSeNFexU7Ujwl_U6lb2RYPn3Dc4kJ8d8zE5LnmY2Gz6CMS7I37b1PUw5fYZLQIcEIxMI8Dqv2mYFEjEawXtTJZs/s200/shape.jpg" /> <span>好玩遊戲，射擊遊戲，益智遊戲，賽車遊戲，武打遊戲，線上遊戲，戰爭遊戲。</span> </div> - 執行結果： 好玩遊戲，射擊遊戲，益智遊戲，賽車遊戲，武打遊戲，線上遊戲，戰爭遊戲。
（三）absolute：元素矩格的位置用 top, right, bottom, left 設定，其距離是相對於包納矩格的邊界。absolute 元素對其它元素的佈局沒有影響。下例中，父元素 DIV 使用預設的 position:static，因此父元素會被跳過，包納矩格是以更上一層的祖父元素為準，在此就是網頁的前端視窗。
- 風格用法：
<div style='width:250px; height:250px; background:#338'><img style='position:absolute; bottom:-200px; right:50px'
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNHoHui01woBwkOdqFjwXKNEPsuk_t0yLFXO6PdJD_OO-fTyLAksb6JrIwm_E9aY-Lj5x7LkTxeu_450N-eutQiPei_C5uprpGOxv95ef9nZe7qrn_15MVUcLVoQ3sxRkggGNo_q9g_pA7/s200/absolute.JPG" /> <span>好玩遊戲，射擊遊戲，益智遊戲，賽車遊戲，武打遊戲，線上遊戲，戰爭遊戲。</span> </div> - 執行結果：
好玩遊戲，射擊遊戲，益智遊戲，賽車遊戲，武打遊戲，線上遊戲，戰爭遊戲。
- 上面例子中的圖像，設定 position:absolute，結果圖像跑到此頁的開頭右方去了。
| position（你正在看 第一頁） | : | 第一頁 | 第二頁 |
