Understanding CSS Positioning

在網頁中,CSS 將每個元素視為一個矩形區塊(Box)。每個區塊則由內容(Content)、邊距(Padding)、邊框(Border)及邊界(Margin)等區域組合而成,這樣的概念又被稱為區塊模型(Box Model)。
box
CSS 運用區塊模型的概念,將樣式套用在元素上來決定其外觀及位置。本文接下來將介紹在 CSS 排版中不可或缺的定位(Positioning)觀念。
靜態位置(position:static)
這是所有 HTML 元素預設的 position 屬性值(也就是沒有定位),它會配合版面配置規則(Layout Rule)決定其位置座標。所以,如果在 position:static 的元素設定 top、left、right 或 bottom 等偏移(Offset)屬性將會自動被忽略。

相對位置(position:relative)
相對於原本的位置(靜態位置),也就是將元素從原先的位置,依據元素的偏移屬性,將元素作對應的距離調整,而且其原本位置的區塊空間將會被保留,位移後也可能會覆蓋其它區塊。如果有區塊相互重疊的情況,你可以使用 z-index 屬性來決定重疊的順序。


絕對位置(position:absolute)
以父元素的邊界位置為基點,再依據偏移屬性作對應的距離調整。如果其上層的親代元素都不是以 absolute 或 relative 定位時,那麼就會以 body 元素的邊界為基準。該元素會從 HTML 的正常排版(Normal Flow)中移除,然後再依據容器區塊(Containing Box)的邊界來重新定位該元素,因此也可能會覆蓋其它原塊。而所謂的正常排版是指從上而下、由左至右的編排方式。例如段落區塊(Block Box)會在其容器區塊中從上而下排列;而行內區塊(Inline Box)則是由左至右排列。


固定位置(position:fixed)
基本上與絕對位置的定位方式相同,為一的差別在於其位置固定,且不會隨捲軸的移動而改變,就像浮水印(Watermark)一樣。這個屬性值並不適用 IE 6 或更早期的版本。

參考資料:
CSS basic box model


Share/Save/Bookmark

0 comments :: Understanding CSS Positioning

張貼留言