CSS定位屬性

關於css定位屬性詳解及用法

在css中，定位屬性position是用來檢索或設置對象的定位方式的屬性。

它主要有如下5個屬性值：

1.無定位static：默認值，也能夠用於取消元素以前的定位設置。

2.相對定位relative：（參照物：本身所在的位置）

特色：①不使元素脫離文檔流，原來的空間會被保留。

②若是沒有定位偏移量left、top、right、bottom，對元素自己沒有任何影響；一樣，left、top、right、bottom不能獨自存在，必須配合定位元素一塊兒使用。

③不影響其餘元素佈局。

 

 

 

3.絕對定位absolute:（參照物：包含塊----該元素的祖先級元素）

特色：①使元素徹底脫離文檔流，原來的空間會被後面的元素覆蓋。

②使內聯元素支持寬高（讓內聯具有塊特性）。

③使塊元素默認寬根據內容決定（讓塊具有內聯特性）。

④包含塊是絕對定位的基礎，給祖先級元素定義成包含塊的方法：

給祖先級元素添加position：relative/absolute/fixed；

若是它的祖先級元素定義了包含塊，那它就最近的祖先級元素髮生偏移。若是它的祖先級元素沒有定義包含塊，則相對於瀏覽器的可視窗口發生偏移。（默認狀況下，瀏覽器的可視窗口是一個大的包含塊）

 

 

 

 

ps：

（1）絕對定位和相對定位的區別：

a.相對定位的參照物是本身自己所在的位置，絕對定位的參照物的是包含塊。

b.相對定位不會脫離文檔流，並且不會對頁面的佈局產生影響；絕對定位會脫離文檔流，原來的空間會被後面的元素覆蓋。

（2）檢索或設置對象的層疊順序屬性（只對具備定位屬性的元素起做用):

z-index: auto(默認值)/number(無單位的整數值，可爲負)；

若是對象沒有設置z-index，最後寫的對象優先顯示在上層；若是對象設置了z-index，則數值越大，層越靠上。

 

4.固定定位fixed:（參照物：整個瀏覽器窗口）

特色：①使元素徹底脫離文檔流，原來的空間會被後面的元素覆蓋。

②使內聯元素支持寬高（讓內聯具有塊特性）。

③使塊元素默認寬根據內容決定（讓塊具有內聯特性）。

④相對於整個瀏覽器窗口進行偏移，不受瀏覽器滾動條的影響，不受祖先元素的影響。

 

 

 

5.黏性定位sticky：

在沒有到達指定位置的時候，是沒有定位效果的，到達了指定位置，就變成了固定模式。