4/29/2010

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 就可以解決。

No comments: