認識position定位

在html中，改變佈局有兩種方式一種是float一種是position定位，今天解釋一下什麼。position定位，今天解釋一下什麼。

position是CSS中非常重要的屬性，透過position屬性，我們可以讓元素相對於其正常位置，父元素或瀏覽器視窗進行偏移。

postion屬性我們成為定位，它有4個不同類型的定位，這些類型會影響元素的產生方式，下面我們詳細說明position屬性。

Position有4個屬性值：1.static、2.relative、這幾種屬性。 Static：是預設定位。不改變任何位置，網頁也就依照正常的文件流程規則排列。 Relative：是相對定位。元素則依照正常的文檔流程來規則排序。但可以透過

left

、

top

、bottom、right等規則的規則。讓網頁看起來更美觀。 Absolute：是絕對定位：元素會脫離文檔流，元素可以透過：top、left、

right

元素的位置。讓網頁看起來美觀。 Fixed：是固定定位：元素會脫離正常的文檔流，元素將被設定在瀏覽器上一個固定的位置上，不會隨著元素滾動。元素可以通過：top、left、right、bottom等規則的規則。

Absolute

：是產生絕對定位，相對於最近一級的定位不是static的父元素來進行定位的，元素設定成absolute後會脫離文檔流，並且不佔原本的空間，後面的元素會頂替上去。 relative翻譯成中文稱相對定位，設定了這個屬性後，元素會根據top，left，bottom，right進行偏移，關鍵點是它原本的空間仍然保留。 Fixed（老IE不支援）產生絕對（固定）定位的元素，通常相對於瀏覽器視窗來進行定位。

而relative呢是產生相對定位的元素，相對於在普通的位置進行定位。

Static該屬性值是所有元素定位的預設情況，在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不願意見到元素所繼承的屬性影響本身，從而可以用position:static取消繼承，即還原元素定位的預設值。

Inherit：繼承屬性，規定應該從父元素繼承 position 屬性的值。

！注意：很多網頁都是居中的，這樣，當對元素進行絕對定位的時候，在不同的分辨率下顯示會有偏差，這時，我們可以通過類似下面的方法來處理：

　　

　　

　　

 

以上就是我對html中css屬性的position屬性的解釋，在css中position的功能是非常強大的，也是一個很實用的一個定位屬性。對於position定位相信大家會在網頁設計中很常用的一個屬性，希望我的這些解釋可以幫助到您。