css定位
浮動(dòng)可以讓多個(gè)塊級(jí)赫茲一行沒(méi)有縫隙排列顯示,經(jīng)常用于橫向排列盒子
定位可以讓盒子自由地在某個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置,并且可以壓住其他盒子
(資料圖片僅供參考)
定位:將盒子定在某一個(gè)位置,所以定位也是在擺放盒子
定位=定位模式+邊偏移
定位模式用于指定一個(gè)元素在文檔中的定位方式,邊偏移決定該元素的最終位置
邊偏移有top/bottom/left/right四個(gè)屬性
相對(duì)定位
相對(duì)定位:元素在移動(dòng)位置的時(shí)候,是相對(duì)于它原來(lái)的位置來(lái)說(shuō)的(自戀型)
相對(duì)于自己原來(lái)的位置移動(dòng)(移動(dòng)位置的時(shí)候參考點(diǎn)是自己原來(lái)的位置)
原來(lái)在標(biāo)準(zhǔn)流的位置繼續(xù)占有,后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待他(不脫標(biāo),繼續(xù)保留原來(lái)位置)
絕對(duì)定位
絕對(duì)定位:元素在移動(dòng)位置的時(shí)候是相對(duì)于它的祖先元素來(lái)說(shuō)的
如果沒(méi)有祖先元素或祖先元素沒(méi)有定位,則以瀏覽器為準(zhǔn)定位
如果祖先元素有定位(相對(duì)/絕對(duì)/固定),則以最近一級(jí)有定位的祖先元素為參考點(diǎn)移動(dòng)位置(父親沒(méi)有看爺爺?shù)?
絕對(duì)定位不在占有原先的位置(脫標(biāo))
子絕父相
子級(jí)絕對(duì)定位,不會(huì)占有位置,可以放到父盒子里面任何一個(gè)地方,不會(huì)影響其他的兄弟盒子
父盒子需要加定位限制子盒子在父盒子內(nèi)顯示
父盒子布局時(shí),需要占有位置,因此父親只能是相對(duì)定位
總結(jié):因?yàn)楦讣?jí)需要占有位置,因此是相對(duì)定位,子盒子不需要占有位置,則是絕對(duì)定位
固定定位
以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素,跟父元素沒(méi)有任何關(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ū)寫(xiě)順序,后來(lái)居上
數(shù)字后面不能加單位
只有定位的盒子才有z-index屬性,標(biāo)準(zhǔn)流和浮動(dòng)沒(méi)有
絕對(duì)定位和盒子居中
加了絕對(duì)定位的盒子不能通過(guò)margin:0 auto水平居中,但是可以通過(guò)以下方法實(shí)現(xiàn)水平和垂直居中
left: 50%讓盒子的左側(cè)移到父級(jí)元素的水平中心位置
margin-left:-100px讓黑向左移動(dòng)自身寬度的一半
定位的拓展
脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷浮動(dòng)元素/絕對(duì)定位/固定定位 的元素都不會(huì)觸發(fā)外邊距合并的問(wèn)題
浮動(dòng)的元素不會(huì)壓住下面標(biāo)準(zhǔn)流的文字(圖片),只會(huì)壓住下面標(biāo)準(zhǔn)流的盒子但是絕對(duì)定位/固定定位會(huì)壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容
網(wǎng)頁(yè)布局總結(jié)
標(biāo)準(zhǔn)流:可以讓盒子上下排列或者左右排列,垂直的塊級(jí)赫茲顯示就用標(biāo)準(zhǔn)流布局
浮動(dòng):可以讓多個(gè)塊級(jí)元素一行顯示或者左右對(duì)齊盒子,多個(gè)塊級(jí)盒子水平顯示就用浮動(dòng)布局
定位:最大的特點(diǎn)就是有層疊的概念,可以讓多個(gè)盒子前后疊壓來(lái)顯示,如果元素自由在某個(gè)盒子內(nèi)移動(dòng)就用定位布局
關(guān)鍵詞：
責(zé)任編輯：Rex_12
