Position
在 CSS 中,有三種可控制的方式,放置 box [1]
Normal flow 自然排列[2]
float
排列[3]position
定位
語法
上下左右的設定用得上再使用
定位並不會造成單位變化,所以可以這樣換算
left
= -right
,top
= -bottom
Position定位種類
Static 無定位
原本畫面上的 box 會依照 Normal flow 排列。
position: staic
是每個 HTML element 的預設值。position
設定成這個值時,top
,left
,bottom
,right
將不會有任何作用。
Relative 相對定位[4]
原本畫面上的 box 會依照 Normal flow 排列。
假設有個叫 box 的HTML element 設定 position: relative
會有什麼影響
在 normal flow 佔有的空間,依然佔有。
不會影響其它 normal flow 的 HTML Element
偏移量是相對於在 normal flow 的位置
會導致元素重疊
在 table 有些跨欄偏移的應用
relative 和 static 其實非常像,但在 relative 的情況下可以使用 top
,right
, bottom
, left
, z-index
且不影響其他 elements 的排列。也就是像下面這個樣子:
藍色的方塊還以為綠色的方塊還在原本的位置上,但實際上綠色的方塊已經透過 top
,right
, bottom
, left
屬性偏移原本的位置了。另一方面,你也會注意到,在 HTML 結構上先出現的綠色方塊,這時候覆蓋在藍色方塊上,這是因為當我們設定 position: relative
時,會創造出一個新的 "stacking context",這個新的 stacking context 出現在原本的 stacking context 之後,所以在 z-index 層級上會變得比較高。
Absolute 絕對定位[4]
原本畫面上的 box 會依照 Normal flow 排列。
假設有個叫 box 的HTML element 設定 position: absolute
會有什麼影響
跳脫 normal flow 排列規則,不佔有任何空間。
不會影響其它 normal flow 的 HTML Element
偏移量是相對於有「非
position: static
」的位置box 以內有 normal flow 和
position: absolute
的都與 box 相關會導致元素重疊
以下圖為例,白色方塊設定了 position: relative
,當綠色方塊設定了 position: absolute
要往父層找參考點的時候,就會找到白色方塊,然後因為此時設定 top: 0; left: 0
,所以就會直接黏在白色方塊的左上角。
同時你也會發現,因為綠色方塊脫離了原本的排版,所以藍色方塊就當綠色方塊不存在,直接排在紅色方塊後面,跟position: relative
的狀況不一樣。
但如果我們忘記在白色方塊設定 position: relative
的時候,會發生什麼事情呢?這時候綠色方塊就會一路往上找,找到上一個創造出 stacking context 的 element,也就是 html 上
最後一提的是,不是只能找到 position: relative
的 element 才能當作參考點,position: absolute
, position: fixed
也都可以喔。
Fixed 可視區的絕對定位[4]
可視區的絕對定位,唸起來很呦口。我也不知道怎麼翻才好。
這是一種類似絕對定位的定位方式。唯一的區別在於偏移量參考點
absolute 參考容器(的容器)中,使用「非 static 定位」的容器
偏移量是相對於可視區 (viewport)
每個可視區都會重複 fixed 定位的內容
在內容捲動時,被 fixed
的元素會固定不移動。類似固定背景的效果
有 Media Query 時,有用到 paged 類型,要注意重複的情況。 每個頁面固定放置簽名,是個很有效的做法。
如果弄清楚了 position: abosolute
的特性,那麼要理解 position: fixed
就相對簡單多了。不同於 absolute
,fixed
的參考點在 viewport 上,也就是說,它是以使用者可以看到的畫面做為參考點,常見的應用就是,讓一個 element 固定在畫面的某個地方,不會因為畫面滾動而有所改變。
另一個有趣的事情是,如果我們要將網頁印成文件,那麼這個 fixed
的 element 會出現在每一頁的同一個位置上。
Sticky 滾動黏滯定位[4]
sticky
是一種類似 relative
的定位方式,偏移量是參考有 scroll 的容器或者是 可視區 (viewport)。
保留原有 normal flow 所佔用的空間
sticky
元素的活動範圍界於 sticky-constraint rectangle 四邊裡面與容器四邊裡面,若之間的空間小於sticky
元素,則sticky
元素被捲出容器四邊偏移量,捲動到離各邊多少,單位使用百分比,其 100% 是該方向容器的尺寸
element 滾到上下邊界時, margin 會 margins collapse
根據 MDN 上的說明,sticky
element 不會脫離原本的排版流,跟 relative
有點像,但是會黏在最近的 "scrolling ancestor" 上。
什麼是 "scrolling ancestor" 呢?可以想像創造出可滾動的父層元素,像是有設定 overflow 的 elements,或者是,整個 html 文件本身。
知道什麼是 scrolling ancestor 之後,sticky
element 的行為就是:
在還沒有碰到 scrolling ancestor,就像是
position: relative
一樣在碰到 scrolling ancestor 後,就像是
position: absolute
一樣,位置會固定在相對於參考點的絕對位置上,而這個參考點就是 scrolling ancestor。
舉下面的例子,container 當中的 elements 高度遠大於 container 的高度,因為有設定 overflow
因此產生滾動效果。對於有設定 position: sticky
的綠色方塊來說,使用者一路往下滑、綠色方塊往上跑的時,當綠色方塊碰到 scrolling ancestor,也就是 container 的時候,就會「黏在」他上面。當然「黏的」的位置,可以透過 top
, right
, bottom
, left
來決定。
Last updated