[教材] 三大定位方法之一：達到絕對定位（Absolute Positioning）的定位屬性（position）

一、基礎

定位屬性（position）顧名思義是一種CSS屬性（property），設計的目的是在達到「絕對定位」的排版需求。既然是「屬性」就會有「預設值」，position 的預設值是 static（靜態定位），其效果就是我們平常所認知的「從上到下、由左至右」的排版效果。也就是說，每一個HTML元素（div、p、span等）就算我們沒有設定，都會有一個 position 屬性，同時是以 static 的形態存在，版面也照著我們所預期的而官方文件稱為「自然流動」的方式排列著。

在繼續介紹之前，讓我們整理一下position常用的三種設定值與效果：靜態定位（STATIC）、相對定位（RELATIVE）、絕對定位（ABSOLUTE）。

二、基本概念：Relative 與 Absolute

基本語法：

CSS
#DIV_PARENT {
    position: relative;
    // 這個DIV是提供定位點的父區塊，一般設為 relative
    // 提供定位點的父區塊，因為只提供定位點，一般不設定寬度與高度
}

#DIV_CHILD {
    position: absolute; // 這個DIV是要以絕對定位排版的子區塊
    top: 100px; // 設定為上方距定位點 100px
    left: 200px; // 設定為左方距定位點 200px
    /* 一般而言，絕對定位的區塊都會設定固定的寬度，高度則則依需求而定 */
    width: 200px;
    height: 100px;
}

HTML <div id="DIV_PARENT"> <div id="DIV_CHILD"> 子區塊內容 </div> </div> <!-- 注意事項： 子區塊需放在父區塊（DIV_PARENT）「裡面」。 -->
定位屬性在 CSS2 中有五種「值／設定」：static | relative | absolute | fixed | inherit，我們在這裡針對 relative 和 absolute 作介紹。

Relative：

初始座標：如果將一個 div 設為 position:relative，其「座標」會從「當下」開始算起。也就是說和預設排版的 static 一樣，頁面內容排到那裡， div就會從那裡開始。就像下面這個紅色區塊一樣，就會從接著文章內容排版：

佔有區域：
「相對定位」的元素和靜態元素（static）一樣會「佔有」一定的區域。但要注意的是，就算相對定位的元素設定了座標值之後，「佔有」的區域還是之前未位移的區域。這點使用時要特別注意。

Absolute：

初始座標：「絕對定位」初始座標會從頁面的「角落」開始算。要是一個絕對定位的元素設定了「top: 0px; left: 0px」，就會在整個頁面的左上角出現，就像現在這篇文章的「最左上角」。要特別注意絕對定位不會像相對定位一樣，文章排版到那就從那裡開始。但，若絕對定位的元素沒有設定 top、right、bottom、left 等位移屬性，其實際效果也會像相對定位一樣，從文章內容當下接著排版。
我是絕對定位的DIV，如果設定 top:0; left:0; 我會從整個畫面的左上角開始

三、實例

四、參考資料
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)



(編輯記錄)