CSS position屬性

position屬性之static

作用：
使元素定位於常規/自然流中
特點：
（1）left、top、right、bottom屬性和z-index屬性不生效
（2）如果兩個相鄰的元素都設定了margin，兩者中最大的才會生效
（3）如果元素具有固定的寬度和高度，那麼把左右邊距設定為auto即可達到水平居中的效果。

position屬性之relative

作用：
使元素成為可定位的祖先元素（絕對定位的基準 ）
特點：
（1）left、top、right、bottom屬性和z-index屬性可以生效。
（2）使用了相對定位，元素不會離開常規流。像下圖這樣。

position屬性之absolute

作用：
使元素脫離常規流（起到定位的作用）
特點：
（1）脫離常規流。如下圖：

（2）以設定了relative屬性的祖先元素作為定位的基準。
（3）left、right、top、bottom設定為0，margin設定為auto的時候可以實現水平垂直居中。

position屬性之fixed

作用：
使元素脫離常規流（起到定位的作用，相對於瀏覽器視窗做定位）
特點：
（1）脫離常規流。
（2）相對於瀏覽器視窗做定位。

position屬性之sticky

作用：
製作出吸附的效果
特點：
（1）不脫離常規流
（2）跟fixed一樣相對於瀏覽器視窗定位，但因為不脫離常規流，所以不能超過父元素的範圍，
不能大於（大於離不開父元素）也不能小於（小於沒有位置放）。

一般來說，絕對定位（absolute）都會結合相對定位（relative）來使用。
那如果沒有父元素設定了相對定位的話，就會根據body標籤來進行定位。

下圖中黃色的元素（黃色是綠色的父元素）沒有設定position:relative屬性。所以會根據body標籤來定位。（紅色邊框是body的邊界）

而只要給a標籤（黃色的元素）加上position:relative屬性