您好,登錄后才能下訂單哦!
小編給大家分享一下Css基礎定位position怎么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
CSS 有三種基本的定位機制:普通流、浮動和絕對定位。
在CSS中一共有N種定位方式,其中,static ,relative,absolute三種方式是最基本最常用的三種定位方式。position取值:
static 默認定位方式
relative 相對定位。相對于原來的位置,但是原來的位置仍然保留。理解為棋盤上棋子的排列:
棋子從左往右排列,達到邊緣時移到下一行。棋子排列方式是由display決定。樣式屬性display的值為block的元素自動放在下一行(默認),而為inline的元素自動放在同一行,位于前一個元素后面。對象不可層疊,依據left,right,top,bottom等屬性在正常文檔流中偏移自身位置
absolute 絕對定位。相對于最近的非標準流定位,原來的位置消失,被后邊元素的位置所頂替。
這個屬性是相對于參照物,能夠指定元素的矩形局域相對于父元素區域的位置。
將被賦予此定位方法的對象從文檔流中拖出,使用left,right,top, bottom等屬性相對于其最接近的一個最有定位設置的父級對象進行絕對定位,如果對象的父級沒有設置定位屬性,即還是遵循HTML定位規則的,則依據 body 對象左上角作為參考進行定位。絕對定位對象可層疊,層疊順序可通過 z-index 屬性控制,z-index值為無單位的整數,大的在最上面,可以有負值。
偏移屬性值:
left:左邊的位置偏移
right:右邊的位置偏移
top:頂部的位置偏移
bottom:底部的位置偏移
relative 相對定位
absolute 絕對定位
以上是“Css基礎定位position怎么用”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。