position屬性

relative:相對的出現在原本位置,但不影響其他內容。
像是這個方框沒有設margin
理論上應該要左邊一點(也就是他的static位置)
但是當我們把position設成relative
並且將left設為30px後
它就會出現在距離左邊30px的位置
這個框框顯示在綠色relative框框「下方」的另一個relative框框
當我們把他的top設為-40px時
你會發現他跑上來了!
而且不會影響到原本頁面上其他東西的排版
0.0/
I'm fixed

你會發現上面兩個框框有交疊的部分
而z-index就是用在這時候
z-index的大小決定它到底是壓人的那個
還是被壓的那個=\\\\\\=
數字大的在上面
例如z-index: 1;的桃紅色框框會壓在z-index: 0;的綠色框框上面
1壓在0上面,有沒有很好記?

當今天我們的頁面足夠長
像這樣可以上下捲動
fixed的功能就可以被看見了
你可以發現右邊的藍色框框在視窗中的位置不會因滾動卷軸而改變

在這邊我在右下角

我是來佔空間的

至於absolute
它的功能跟fixed很像
差別在於fixed會固定在「視窗」的特定位置
而absolute則是固定在「上層元素絕對位置」的特定位置
像是紫色框框會固定在上層元素的右下角

在這邊我也在右下角