# [CSS] 定位：Position
###### tags: `HTML/CSS`

>文章內容皆來自網路及課程，僅做個人學習筆記用途

## static 靜態定位
預設的排版方式。
原本有設定position再使用static會把所有的定位效果回歸於零，沒有定位效果。

## relative 相對定位
會使其元素「相對地」調整其原本該出現的所在位置，但依舊佔據原本的位置。而這些「相對定位」過的元素在頁面上移動，都不會影響到其他元素所在的位置。

.box{
    width: 100px;
    height: 100px;
    background: midnightblue;
    position: relative;
    }


.box{
    width: 100px;
    height: 100px;
    background: midnightblue;
    position: relative;
    left: 100px;
    }


原本位子的在新的位子的左邊100px，簡單判斷的話就是使用相對定位時想往右移就輸入左，想往上移就輸入下這樣。

## fixed 固定定位
相對於瀏覽器視窗的定位，頁面滾動也會停留，常用於廣告。
自己獨立一層，所以原本的位子空了下來由旁的物件補上。
原本物件位子在哪他就會距離視窗多遠，他只是往前一層資料，原本所在位子，與視窗位置(上及左)多遠就多遠。
若fixed的位置在視窗外就會找不到他。

視窗這個範圍並沒有告知寬高，所以無法計算他可以利用的空間多少，所以無法使用margin:auto，但可以使用top/bottom/right/left: 0 屬性去達到margin:auto的效果。

## absolute絕對定位
物件獨立一層，不佔據原本位置。
絕對定位是以具備定位設定(不能是static)的父層的左上角原點為定位基準點，做上下左右位移。若沒有任何父層空間有定位設定，則會依照視窗空間做位移參考。

## z-index
* 所有物件的 z-index 都預設為0
* z-index 數字越大層級越上面
* 後方原始碼蓋住前方原始碼
* 有定位層級的物件 > 無定位層級
* 有 z-index 的高於沒有 z-index

## sticky
sticky 是黏住的意思，他會在話面滾動到設定值的時候，就固定在那個位置。