CSS Position Relative 基本應用 - 四角定位

Ref: CSS Position Relative : 基本應用 - 四角定位

CSS中的Position設定數值分別為 absolute, relative, fixed, inherit 和預設的 static。而最常用的則是Relative 和 Absolute，而Fixed…IE 6是完全不支援的關係下，儘量也不建議使用。

初 學者通常也分別不到Relative 和 Static用法的分別。Relative擁有Top, right, bottom, left 的屬性。不過這對初學者用處不大，平時預設(Static)時也會用Margin的寫法來控制物件和物件之間的距離。

Relative最實 用的例子就是，有些常在其中一個Div上設置右上/右下的icon。用最基本的寫法也許是img上加上position absolute，再利用margin-left慢慢推過去。雖然absolute也是擁有Top, right, bottom, left 屬性。可是你用上Right : 0，它卻走到畫面最右端。

其實只要在Absolute的外層再加入一個Relative的屬性，你的 Top, right, bottom, left 就會跟隨Relative的DIV。

Example:

Absolute bottom

這個寫法亦可以用在圓邊排版上，不過這個設定時要留意一下IE 6，通常利用CSS Hack，加入 _bottom:-1px 就可以解決。