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

4 comments:

Saddam said...

Really nice blog. I liked the content of your blog. I daily search articles and study for a web design company. I found your blog useful and interesting. Thanks for posting.

SEO Services Consultants said...

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck! Web Design Company

w3webschool said...

SEO Training Starts from January 2013 - Hurry Up-Kolkata.We are smart Internet marketing consultant, will help you to be established. Get your knowledge expanded with the SEO professionals and internet marketing freelancers. After getting trained you will receive job offers from the companies, you don’t need to find or blow any HR. Keep faith on our helpful and sophisticated lessons units. Call me at: 8961618170.

rocky case said...

Stephen Stapinski

Really your blog is very interesting.... it contains great and unique information. I enjoyed to visiting your blog. It's just amazing.... Thanks very much for the share.