在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定位相信大家會在網頁設計中很常用的一個屬性,希望我的這些解釋可以幫助到您。