哈希技術部落格


Slider

HTML&CSS教學 – relative與absolute定位方式比較

設計網頁排版時,我們會需要將不同的區塊(DIV)進行控制,而最常用到的就是relative與absolute。對比預設的static定位,這兩種方式可以自由上下移動與定位。

今天,我們會簡單分享,relative與absolute的定位,有哪些需要注意的事項哦!

定位方式語法

CSS常見的定位語法包含static (預設值)、absolute (絕對定位)、relative (相對定位)、fixed (固定定位)

使用relative與absolute,就可以透過top、left、right…等屬性控制,調整div的位置

定位方式差異

relative:
使用position:relative定位後,這個區塊以原先的位置為起始點,所以原本區塊的空間範圍仍然存在。

absolute:
使用position:absolute定位後,這個區塊就會脫離原本的配置,所以原本區塊的空間範圍就消失了,因此後續的區塊會接上。
而定位的位置則是會透過尋找上層非static的區塊,當作定位的起始點。
如果上層都沒有非static的區塊,就會以body為起始點。

fixed:
使用position:absolute定位後,這個區塊的位置會被固定住,包含捲動網頁時也是。因此常會被用來製作固定式的按鈕,或是導覽列…等等

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *