在html中,改變佈局有兩種方式一種是float一種是position定位,今天解釋一下什麼position定位。 position是CSS中非常重要的一個屬性,通過position屬性,我們可以讓元素相對於其正常位置,父元素或者瀏覽器視窗進行偏移。 postion屬性我們成為定位,它有4個不同類型 ...
在html中,改變佈局有兩種方式一種是float一種是position定位,今天解釋一下什麼position定位。
position是CSS中非常重要的一個屬性,通過position屬性,我們可以讓元素相對於其正常位置,父元素或者瀏覽器視窗進行偏移。
postion屬性我們成為定位,它有4個不同類型的定位,這些類型會影響元素的生成方式,下麵我們詳細說明position屬性。
Position有4個屬性值:1.static、2.relative、3.absolute、4.fixed。這幾種屬性。
Static:是預設定位。不改變任何位置,網頁也就按照正常的文檔流規則排列。
Relative:是相對定位。元素則按照正常的文檔流來規則排序。但可以通過left、top、bottom、right等css規則來改變元素的位置。讓網頁看起來更加美觀。
Absolute:是絕對定位:元素會脫離文檔流,元素可以通過:top、left、right、bottom等css規則來改變元素的位置。讓網頁看起來美觀。
Fixed:是固定定位:元素會脫離正常的文檔流,元素將被設置在瀏覽器上一個固定的位置上,不會隨著元素滾動。元素可以通過:top、left、right、bottom等css規則改變元素的位置。
Absolute:是生成絕對定位,相對於最近一級的定位不是static的父元素來進行定位的,元素設置成absolute後會脫離文檔流,並且不占有原本的空間,後面的元素會頂替上去。
relative翻譯成中文稱相對定位,設置了這個屬性後,元素會根據top,left,bottom,right進行偏移,關鍵點是它原本的空間仍然保留。
Fixed(老IE不支持)生成絕對(固定)定位的元素,通常相對於瀏覽器視窗來進行定位。
而relative呢是生成相對定位的元素,相對於在普通的位置進行定位。
Static該屬性值是所有元素定位的預設情況,在一般情況下,我們不需要特別的去聲明它,但有時候遇到繼承的情況,我們不願意見到元素所繼承的屬性影響本身,從而可以用position:static取消繼承,即還原元素定位的預設值。
Inherit:繼承屬性,規定應該從父元素繼承 position 屬性的值。
!註意:很多網頁都是居中的,這樣,當對元素進行絕對定位的時候,在不同的解析度下顯示會有偏差,這時,我們可以通過類似下麵的方法來處理:
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>
以上就是我對html中css屬性的position屬性的解釋,在css中position的功能是非常強大的,也是一個很實用的一個定位屬性。對於position定位相信大家會在網頁設計中很常用的一個屬性,希望我的這些解釋可以幫助到您。