__x__(34)0908第五天__ 定位 position

position 定位

指將原始擺放到頁面的任意位置。

繼承性：no

默認值：static        沒有定位，原始出如今正常的文檔流中

可選值：

static :    默認值，元素沒有開啓定位

relative :    開啓元素的相對定位

absolute :    開啓元素的絕對定位

fixed :    開啓元素的固定定位，固定定位也是絕對定位的一種。

當開啓 position 定位後，能夠使用 left，top，right，bottom 進行偏移設置。

 

 

---

 

1. position: relative; 相對定位

(1) 當開啓了相對定位之後，若是不設置偏移量，則元素不會發生任何變化

(2) 相對原來位置進行偏移

left：相對於 元素原來位置的 左側偏移量。

 

top：相對於 元素原來位置的 上側偏移量。

 

right：相對於 元素原來位置的 右側偏移量。

 

bottom：相對於 元素原來位置的 下側偏移量。

 

(3) 相對定位 會使元素提高一個層級，從而蓋住原來的同級或者低級的元素。

(4) 元素定位之後，不會脫離文檔流，始終佔據原來位置。

(5) 相對定位 不會改變元素的性質，塊仍是塊，內聯仍是內聯。

(6) 元素定位之後，不會影響其餘元素的佈局。

---

 

2. position: absolute; 絕對定位

(1) 當元素開啓了絕對定位之後，會脫離文檔流。

(2) 若是不設置偏移量，則元素的位置不會發生變化。

(3) 座標原點 在 「瀏覽器 / 最近的開啓了定位的祖先元素」  的左上角。

(4) 開啓絕對定位之後，若是不設置寬高，則會不顯示。

(5) 絕對定位 會改變元素的性質，內聯元素會變成塊元素，塊元素的width和height都會被內容撐開。

---

 

3. position: fixed; 固定定位

(1) 固定定位 也是一種絕對定位。

(2) 不一樣的是，固定定位永遠都只會相對於瀏覽器窗口左上角進行定位。

(3) 意味着，就算滑動滾動條滾動頁面，元素也會固定於瀏覽器窗口的某個位置。

(4) 應用：固定迷你視頻，固定懸浮廣告，滾動客服，回到頂部，回到底部。

(5) 缺點：IE6及如下不支持。。。必須用JS去實現。