CSS的position之absolute、fixed和relative區別
阿新 • • 發佈：2018-07-07
abs 當前 splay body left position borde ati aud
首先，我們應了解position的默認值——static
static
默認值，沒有定位，元素出現在正常的流中，即忽略 top, bottom, left, right 或者 z-index 聲明
absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
特征：脫離正常流
fixed
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
特征：脫離正常流
relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，"left: 20" 會向元素的 left 位置添加 20 像素。
特征：不會脫離正常流
absolute與fixed
| 共同點 |
1、都會改變行內元素（inline）的呈現方式，display會被設置為block 2、都會讓元素脫離正常流，不占據空間 3、默認都會覆蓋在非定位元素之上，也可通過z-index聲明調整覆蓋順序 |
| 不同點 |
1、absolute的根元素是可以設置的；而fixed的根元素固定為當前窗口（應用） 2、（常用）當你滾動時，fixed元素與窗口（應用）之間的距離是不變的 |
absolute與relative
| 不同點 |
1、absolute參照的是父級元素的左上角；relative參照元素的原始點（比如，"left: 20" 會向元素的 left 位置添加 20 像素） 2、relative的z-index不能定義父子的上下關系，一定是子上父下；absolute多個層可以使用z-index屬性改變層重疊順序 |
CSS的position之absolute、fixed和relative區別