Change History
Message: [教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 03, 2011 10:13PM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 03, 2011 10:13PM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 03, 2011 09:33PM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 03, 2011 09:33PM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 02, 2011 01:41AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 02, 2011 01:41AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 02, 2011 01:37AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 02, 2011 01:37AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 02, 2011 01:27AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 02, 2011 01:27AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 02, 2011 01:19AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 02, 2011 01:19AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 02, 2011 01:14AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 02, 2011 01:14AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 02, 2011 01:04AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 02, 2011 01:04AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 02, 2011 12:49AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 02, 2011 12:49AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Changed By: HP
Change Date: October 02, 2011 12:44AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Change Date: October 02, 2011 12:44AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
Original Message
作者: HPDate: October 02, 2011 12:37AM
[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）
一、基礎
定位屬性（pos定位屬性（position）顧名思義是一種CSS屬性（property），設計的目的是在達到「絕對定位」的排版需求。既然是「屬性」就會有「預設值」，position 的預設值是 static（靜態定位），其效果就是我們平常所認知的「從上到下、由左至右」的排版效果。也就是說，每一個HTML元素（div、p、span等）就算我們沒有設定，都會有一個 position 屬性，同時是以的形態存在，版面也照著我們所預期的而官方文件稱為「自然流動」的方式排列著。
們所預期的而官方文件稱為「自然流動」的方式排列著。
在繼續介紹之前，讓我們整理一下position常用的三種設定值與效果：靜態定位（STATIC）、相對定位（RELATIVE）、絕對定位（ABSOLUTE）。
二、基本概念：Relative 與 Absolute
style="clear:both">
定位屬性（pos定位屬性（position）顧名思義是一種CSS屬性（property），設計的目的是在達到「絕對定位」的排版需求。既然是「屬性」就會有「預設值」，position 的預設值是 static（靜態定位），其效果就是我們平常所認知的「從上到下、由左至右」的排版效果。也就是說，每一個HTML元素（div、p、span等）就算我們沒有設定，都會有一個 position 屬性，同時是以的形態存在，版面也照著我們所預期的而官方文件稱為「自然流動」的方式排列著。
們所預期的而官方文件稱為「自然流動」的方式排列著。
在繼續介紹之前，讓我們整理一下position常用的三種設定值與效果：靜態定位（STATIC）、相對定位（RELATIVE）、絕對定位（ABSOLUTE）。
二、基本概念：Relative 與 Absolute
style="clear:both">
定位屬性在 CSS2 中有五種「值／設定」：static | relativ
佔有區域：
我是相對定位的DIV，文章排到那裡我就從那裡開始
佔有區域：
Absolute：
初始座標：
我是絕對定位的DIV，我會從整個畫面的左上角開始
我是絕對定位的DIV，如果設定 top:0; left:0; 我會從整個畫面的左上角開始
我是相對定位的DIV，文章排到那裡我就從那裡開始
我雖然是絕對定位的DIV，但我生在個紅色DIV裡面，所以我會從它的原點算起。我的設定是 top: 50px; left: 20px;（有沒有注意到我可以和其他 DIV「重疊」哦！）
佔有區域：
Absolute：
初始座標：
我是相對定位的DIV，文章排到那裡我就從那裡開始
我雖然是絕對定位的DIV，但我生在個紅色DIV裡面，所以我會從它的原點算起。我的設定是 top: 50px; left: 200px;（有沒有注意到我可以和其他 DIV「重疊」哦！）
佔有區域：
「相對定位」的元素和靜態元素（static）一樣會「佔有」一定的區域。但要注意的是，就算相對定位的元素設定了座標值之後，「佔有」的區域還是之前未位移的區域。這點使用時要特別注意。
Absolute：
初始座標：
我是相對定位的DIV，文章排到那裡我就從那裡開始
我雖然是絕對定位的DIV，但我生在初始座標：
我是絕對定位的DIV，如果設定 top:0; left:0; 我會從整個畫面的左上角開始
初始座標：「絕對定位」初始座標會從頁面的「角落」開始算。要是一個絕對定位的元素設定了「top: 0px; left: 0px」。就會在整個頁面的左上角出現，就像現在這篇文章的「最左上角」。要特別注意絕對定位不會像相對定位一樣，文章排版到那就從那裡開始。我是絕對定位的DIV，如果設定 top:0; left:0; 我會從整個畫面的左上角開始
我是絕對定位的DIV，如果設定 top:0; left:0; 我會從整個畫面的左上角開始個紅色DIV裡面，所以我會從它的原點算起。我的設定是 top: 50px; left: 200px;（有沒有注意到我可以和其他 DIV「重疊」哦！）佔有區域：
「相對定位」的元素和靜態元素（static）一樣會「佔有」一定的區域。但要注意的是，就算相對定位的元素設定了座標值之後，「佔有」的區域還是之前未位移的區域。這點使用時要特別注意。
Absolute：
初始座標：「絕對定位」初始座標會從頁面的「角落」開始算。要是一個絕對定位的元素設定了「top: 0px; left: 0px」，就會在整個頁面的左上角出現，就像現在這篇文章的「最左上角」。要特別注意絕對定位不會像相對定位一樣，文章排版到那就從那裡開始。但，若絕對定位的元素沒有設定 top、right、bottom、left 等位移屬性，其實際效果也會像相對定位一樣，從文章內容當下接著排版。
我是絕對定位的DIV，如果設定 top:0; left:0; 我會從整個畫面9.3 Positioning schemes - 9 Visual formatting model - Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C Recommendation, 2011)的左上角開始
三、實例
四、參考資料
Understanding CSS Positioning part 1 • CSS & (X)HTML • Kilian Valkhof (2008)
9.3 Positioning schemes - Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C Recommendation, 2011)