認識position定位

WBOY
發布: 2016-09-08 08:29:14
原創
2023 人瀏覽過

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

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

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

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

left

top

bottomright等規則的規則。讓網頁看起來更美觀。 Absolute:是絕對定位:元素會脫離文檔流,元素可以透過:topleft

right

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

Absolute

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

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

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

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

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

  

  

  

 

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板