position(定位)布局

2021-10-01 20:24:31 字數 1116 閱讀 4744

屬性值

說明static

預設值。沒有定位,元素按照標準文件流布局

inherit

繼承父元素的position值

relative

相對定位,盒子的位置以標準文件流的排版方式為基準,然後相對於它原本的標準位置偏移,相對定位的盒子仍然在標準流中。

absolute

絕對定位,盒子的位置以它最靠近的已經定位(絕對、固定或相對定位)的父元素或祖先元素為基準,進行偏移 ,脫離文件流,要配合top/bottom/left/right屬性使用才能使它偏移。

fixed

固定定位,以瀏覽器視窗為基準進行偏移,也就是當拖動瀏覽器視窗的滾動條時,依然保持不變

相對定位的特性

相對於自己的初始位置來定位;

元素位置發生偏移後,它原來的位置會被保留下來。

層級提高,可以把標準文件流中的元素及浮動元素蓋在下面

使用場景:一般情況下很少單獨使用,都是配合絕對定位使用,為絕對定位創造定位父級。

絕對定位特性:

根據它的定位父元素定位,如果沒有設定定位的父元素就一直往上找,都沒有就相對於瀏覽器視窗來定位。

元素位置發生偏移後,它原來的位置不會被保留下來。

層級提高,可以把標準流中的元素及浮動元素蓋在下邊。

會脫離標準文件流。

如果沒有設定寬度,那他會使用預設寬度100%,但是設定絕對定位後,丟失寬度,寬度由內容決定

固定定位的特性:

相對於瀏覽器視窗來定位。

偏移量不會隨滾動條的滾動而滾動。

position定位布局

值 static 預設值,沒有定位,可以取消繼承的定位屬性 relative 相對定位,相對於元素自身在文件流的位置定位,不脫離標準流 absolute 絕對定位,相對於最近的乙個定位了的父元素,脫離標準流,不再佔據位置 fixed 固定定位,相對於瀏覽器視窗進行定位,脫離標準流,不再佔據位置 st...

CSS布局定位 position

取值 static absolute fixed relative static 預設值。無特殊定位 物件遵循html定位規則。absolute 絕對定位 將物件從文件流中拖出 可層疊 用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在...

css的定位(Position 布局

當乙個元素具有position absolute屬性時,它的位置由下列規則確定 1 如果該元素沒有trbl,以父元素 直接父元素 中在其之前的元素逐一定位後,緊跟最後乙個元素定位,若之前沒有其他元素,則以父元素的左上角定位。沒有直接父元素時,以其之前的元素逐一定位後,緊跟最後乙個元素定位。2 如果設...