CSS（六）元素定位（position）

本章主要內容

定位介紹

static 定位

relative 定位

absolute 定位

fixed 定位

sticky 定位

1、position介紹

position屬性適用於 任何元素；

2、默認定位（position:static ）

A、做用：

• 是元素定位於天然流中，上下左右的偏移對其無效（默認屬性），迴歸本真；

B、特色：

• 忽略 top、bottom、 right、left或z-index的偏移
• 兩個未浮動的相鄰的元素若是都設置了外邊距（margin）那麼最終的外邊距 = 二者中最大的
• 未浮動的塊級元素若是設置了width與height，且static的左右定位都是auto，左右外邊距會自動平分整個剩餘寬度，元素自動水平居中；

3、相對定位（position:relative）

A、做用：

• 爲子元素絕對定位（absolute）作了一個參照物；

B、特色：

• 能夠使用top、bottom、left、right或者z-index進行相對於本身定位偏移；
• 相對定位的元素不會離開天然流
• 任何元素均可以設置relative，他的後代均可以相對於他進行絕對定位；
• z-index能夠對堆疊的元素進行排序

4、絕對定位（position:absolute）

A、做用：

• 元素脫離天然流進行定位偏移；

B、特色：

• 使元素脫離天然流；
• 若是父及元素沒有relative屬性，那麼會參照body進行定位；
• 元素設置了width與height，且四個方向定位偏移都爲0，且同時設置了margin:auto則會居中；
• 元素沒設置width與height， 且四個方向定位偏移都爲0，則子元素會與relative的父元素重合；

5、固定（position:fixed）

A、做用：

• 與absolute很類似，fixed的參照物是視口，absolute參照物是relative；

B、特色：

• 固定在視口上，不隨滾輪的滑動而改變位置；

6、磁貼（position:sticky）

A、做用：

• relative與fixed的完美結合，製造出吸附的效果；

B、特色：

• 產生偏移，位置還在天然流中；
• 參照物是有滾動的屬性的父級元素，沒有滾動屬性則選視口；