css中對position的幾種定位方式的最佳詮釋

關於元素的position定位的理解，牛客網的 hardy給出了一個比較好的理解：

在html中網頁能夠當作一個立體的空間，一個完整的頁面是由不少個頁面堆積造成的，如上圖所示

 

CSS中Position屬性有四個可選值，它們分別是：static、absolute、fixed、relative。

 

◆position:static　無定位

 

該屬性值是全部元素定位的默認狀況，在通常狀況下，咱們不須要特別的去聲明它，但有時候遇到繼承的狀況，咱們不肯意見到元素所繼承的屬性影響自己，從而能夠用position:static取消繼承，即還原元素定位的默認值。

 

 

◆position:absolute　絕對定位

 

使用position:absolute，可以很準確的將元素移動到你想要的位置，

 

 

◆position:fixed　相對於窗口的固定定位

 

這個定位屬性值是什麼意思呢？元素的定位方式同absolute相似，但它的包含塊是視區自己。在屏幕媒體如WEB瀏覽器中，元素在文檔滾動時不會在瀏覽器視察中移動。例如，它容許框架樣式佈局。在頁式媒體如打印輸出中，一個固定元素會出現於第一頁的相同位置。這一點可用於生成流動標題或腳註。咱們也見過類似的效果，但大都數效果不是經過CSS來實現了，而是應用了JS腳本。

請特別注意，IE6不支持CSS中的position:fixed屬性。真的很是遺憾，要否則咱們就能夠試試這種酷酷的效果了。

 

◆position:relative　相對定位

 

所謂相對定位究竟是什麼意思呢，是基於哪裏的相對呢？咱們須要明確一個概念，相對定位是相對於元素默認的位置的定位。既然是相對的，咱們就須要設置不一樣的值來聲明定位在哪裏，top、bottom、left、right四個數值配合，來明確元素的位置。