定位 絕對定位 相對定位

2021-10-13 17:32:15 字數 785 閱讀 2922

定位是一種高階的布局手段 

通過定位可以將元素擺放到頁面的任意位置

使用position屬性來設定定位

當元素開啟了定位以後,可以通過偏移量來設定元素的位置

例如:top:100px ; bottom :xxpx ; left、right

注意:

relative
相對定位的參照元素是其本身在文件流中的位置進行定位

相對定位會提公升元素的層級 但是不會使其脫離文件流 不會改變元素的性質,即塊元素還是塊元素,行元素還是行元素

absolute
開啟絕對定位後,元素會從文件流中脫離

絕對定位會改變元素的性質,行變成塊,塊的寬高被內容撐開

絕對定位會使元素提公升乙個層級

絕對定位元素是相對於其包含塊進行定位的

包含塊: 包含塊就是離當前元素最近的祖先塊元素

絕對定位的包含塊:就是離它最近的開啟了定位的祖先元素,如果所有的祖先元素都沒有開啟定位則根元素就是他的包含快

sticky
與相對定位差不多

不同的是粘滯定位可以在元素到達某個位置時將其固定

fixed
固定定位也是一種絕對定位

與絕對定位不同的是固定定位的參照物是瀏覽器的視口

固定定位的元素不會隨網頁的滾動條滾動

CSS定位,相對定位,絕對定位

position relative 表示相對定位。對乙個元素進行相對定位,即指通過設定垂直或水平位置,讓這個元素 相對於 它的原點起點進行移動。如果將top設定20px,那麼框將在原位置頂部下面20畫素的地方 如果將left設定為30畫素,那麼會在元素左邊建立30畫素的空間,也就是將元素向右移動,如...

絕對定位,相對定位,固定定位

通過position屬性來設定元素的定位 static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 說明 當開啟了元素的相對定位以後,而不設定偏移量時,元素不會發生任何變化 相對定位是相對於...

CSS之定位,相對定位,絕對定位,固定定位

1 position 屬性可以控制web瀏覽器如何以及在何處顯示特定的元素。2 可以使用position屬性把乙個元素放置到網頁中的任何位置。可選值 static 預設值,元素沒有開啟定位 relative 開啟相對定位 absolute 開啟絕對定位 fixed 開啟固定定位 3 相對定位 每個元...