CSS之絕對定位

2021-10-05 03:49:29 字數 538 閱讀 2689

絕對定位:

當元素的position屬性設定為absolute後,則元素將開啟絕對定位

絕對定位的特點:

1.開啟絕對定位的元素,如果不設定元素的偏移量元素將不會發生變化

2.開啟絕對定位後,元素將從文件流中脫離出來

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

4.絕對定位會使元素提公升一次層次

5.絕對定位是相對於包含塊進行定位的

包含塊:預設情況下,是離當前元素最近的祖先塊元素

絕對定位的包含塊:離它最近的開啟定位的祖先塊元素

如果所有的祖先元素都沒有開啟定位,則根元素就是它的包含塊

html(根元素、初始包含塊)

demo:

"box1">1

"box4">

4"box5">

5"box2">2

"box3">3

CSS 絕對定位

設定為絕對定位的元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。絕對定位的元素的位置相對於最近的已定位祖先元素 如果元素...

CSS 絕對定位

設定為絕對定位的元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。絕對定位使元素的位置與文件流無關,因此不佔據空間。這一點...

CSS 絕對定位

設定為絕對定位的元素框從文件流完全刪除,並相對於其包含塊定位,包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後生成乙個塊級框,而不論原來它在正常流中生成何種型別的框。css 絕對定位 絕對定位使元素的位置與文件流無關,因此...