css定位

浮動(dòng)可以讓多個(gè)塊級(jí)赫茲一行沒有縫隙排列顯示,經(jīng)常用于橫向排列盒子

定位可以讓盒子自由地在某個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置,并且可以壓住其他盒子

(資料圖片僅供參考)

定位:將盒子定在某一個(gè)位置,所以定位也是在擺放盒子

定位=定位模式+邊偏移

定位模式用于指定一個(gè)元素在文檔中的定位方式,邊偏移決定該元素的最終位置

邊偏移有top/bottom/left/right四個(gè)屬性

相對(duì)定位

相對(duì)定位:元素在移動(dòng)位置的時(shí)候,是相對(duì)于它原來的位置來說的(自戀型)

相對(duì)于自己原來的位置移動(dòng)(移動(dòng)位置的時(shí)候參考點(diǎn)是自己原來的位置)

原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有,后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待他(不脫標(biāo),繼續(xù)保留原來位置)

絕對(duì)定位

絕對(duì)定位:元素在移動(dòng)位置的時(shí)候是相對(duì)于它的祖先元素來說的

如果沒有祖先元素或祖先元素沒有定位,則以瀏覽器為準(zhǔn)定位

如果祖先元素有定位(相對(duì)/絕對(duì)/固定),則以最近一級(jí)有定位的祖先元素為參考點(diǎn)移動(dòng)位置(父親沒有看爺爺?shù)?

絕對(duì)定位不在占有原先的位置(脫標(biāo))

子絕父相

子級(jí)絕對(duì)定位,不會(huì)占有位置,可以放到父盒子里面任何一個(gè)地方,不會(huì)影響其他的兄弟盒子

父盒子需要加定位限制子盒子在父盒子內(nèi)顯示

父盒子布局時(shí),需要占有位置,因此父親只能是相對(duì)定位

總結(jié):因?yàn)楦讣?jí)需要占有位置,因此是相對(duì)定位,子盒子不需要占有位置,則是絕對(duì)定位

固定定位

以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素,跟父元素沒有任何關(guān)系

不隨滾動(dòng)條滾動(dòng)

不再占有原先位置

讓固定定位在版心右側(cè)

讓固定定位的盒子left=50%,走到瀏覽器可視區(qū)一半位置

讓固定定位的盒子margin-left=版心寬度的一半距離

就可以讓固定定位的盒子貼著版心右側(cè)對(duì)齊了

定位的疊放順序z-index

在使用定位布局時(shí)可能出現(xiàn)盒子重疊的情況,可使用z-index控制盒子的前后次序

數(shù)值可以是正整數(shù),負(fù)指數(shù)或0,默認(rèn)為auto,數(shù)值越大盒子越靠上

如果屬性值相同則按照書寫順序,后來居上

數(shù)字后面不能加單位

只有定位的盒子才有z-index屬性,標(biāo)準(zhǔn)流和浮動(dòng)沒有

絕對(duì)定位和盒子居中

加了絕對(duì)定位的盒子不能通過margin:0 auto水平居中,但是可以通過以下方法實(shí)現(xiàn)水平和垂直居中

left: 50%讓盒子的左側(cè)移到父級(jí)元素的水平中心位置

margin-left:-100px讓黑向左移動(dòng)自身寬度的一半

定位的拓展

脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷浮動(dòng)元素/絕對(duì)定位/固定定位 的元素都不會(huì)觸發(fā)外邊距合并的問題

浮動(dòng)的元素不會(huì)壓住下面標(biāo)準(zhǔn)流的文字(圖片),只會(huì)壓住下面標(biāo)準(zhǔn)流的盒子但是絕對(duì)定位/固定定位會(huì)壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容

網(wǎng)頁布局總結(jié)

標(biāo)準(zhǔn)流:可以讓盒子上下排列或者左右排列,垂直的塊級(jí)赫茲顯示就用標(biāo)準(zhǔn)流布局

浮動(dòng):可以讓多個(gè)塊級(jí)元素一行顯示或者左右對(duì)齊盒子,多個(gè)塊級(jí)盒子水平顯示就用浮動(dòng)布局

定位:最大的特點(diǎn)就是有層疊的概念,可以讓多個(gè)盒子前后疊壓來顯示,如果元素自由在某個(gè)盒子內(nèi)移動(dòng)就用定位布局

關(guān)鍵詞：

責(zé)任編輯：Rex_12