css定位有哪幾種方式


 

一、position 屬性規定元素的定位類型,它一般有以下四個值:

默認static

相對定位relative

絕對定位absolute

固定定位fixed

元素可以使用的頂部,底部,左側和右側屬性定位。然而,這些屬性無法工作,除非是先設定position屬性,他們也有不同的工作方式,這取決於定位方法。

二、實例講解

1、默認static

HTML 元素的默認值,沒有定位,遵循正常的文檔流對象。靜態定位的元素不會受到 top, bottom, left, right影響。

2、相對定位relative

元素相對自身偏移某個位置,元素扔保持其未定位的形狀,它原本所占用的空間仍會保留,子元素可相對該元素進行絕對定位。

實際案例效果:

 

 

 

3、絕對定位absolute

賦予絕對定位的元素會從文檔流中拖出,使用left、right、top、bottom等屬性相對於相對於最近的已定位的父級元素進行絕對定位,如果元素的父級沒有設置定位屬性,則根據 body 元素左上角作為參考進行定位。絕對定位元素可層疊,層疊順序可通過 z-index 屬性控制,z-index值為無單位的整數,0位默認值,大的在上面,可以有負值。

實際案例效果:

 

 

 

4、固定定位fixed

不占空間,相對於瀏覽器的窗口來定位,這意味着即便頁面滾動,它還是會停留在相同的位置,一個固定定位元素不會保留它原本在頁面應有的空隙。

實際案例效果:

 

 

逆戰班學習總結:定位在網頁布局中也是經常會用到的,在使用的時候一定要考慮好定位值是否占空間,該使用哪一個,尤其是要注意絕對定位在使用的時候一定要搭配着相對定位使用才可以發揮作用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM