定位流
定位流分類(lèi)
相對(duì)定位
絕對(duì)定位
固定定位
靜態(tài)定位
什么是相對(duì)定位
相對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)中的位置來(lái)移動(dòng)相對(duì)定位注意點(diǎn)
相對(duì)定位是不脫離標(biāo)準(zhǔn)流的大审，會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間
在相對(duì)定位中同一個(gè)方向上的定位屬性只能使用一個(gè)
由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的，所以在相對(duì)定位中是區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的厌衙，并且相對(duì)定位的元素會(huì)占用標(biāo)準(zhǔn)流中的位置验庙，所以當(dāng)給相對(duì)定位的元素設(shè)置 margin/padding 等屬性的時(shí)候會(huì)影響標(biāo)準(zhǔn)流的布局
相對(duì)定位應(yīng)用場(chǎng)景
用于對(duì)元素進(jìn)行微調(diào)
配合后面學(xué)習(xí)的絕對(duì)定位來(lái)使用
絕對(duì)定位
- 什么是絕對(duì)定位
絕對(duì)定位就是相對(duì)于 body 來(lái)定位的 - 絕對(duì)定位注意點(diǎn)
- 絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的
- 絕對(duì)定位的元素是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的
絕對(duì)定位的參考點(diǎn)
規(guī)律
默認(rèn)情況下所有的絕對(duì)定位的元素默责，無(wú)論有沒(méi)有祖先元素弛说，都會(huì)以 body 作為參考點(diǎn)
如果一個(gè)絕對(duì)定位的元素有祖先元素郊尝，并且祖先元素也是定位流，那么這個(gè)絕對(duì)定位的元素就會(huì)以定位流的哪個(gè)祖先元素作為參考點(diǎn)
只要是這個(gè)絕對(duì)定位元素的祖先元素都可以
指的定位流是值絕對(duì)定位/相對(duì)定位/固定定位
定位流中只有靜態(tài)定位不行
如果一個(gè)絕對(duì)定位的元素有祖先元素则剃，并且祖先元素也是定位流耘柱，而且祖先元素中有多個(gè)元素都是定位流，那么這個(gè)絕對(duì)定位的元素會(huì)以離它最近的哪個(gè)定位流的祖先元素為參考點(diǎn)
絕對(duì)定位注意點(diǎn)
如果一個(gè)絕對(duì)定位的元素是以 Body 作為參考點(diǎn)棍现，那么其實(shí)是以網(wǎng)頁(yè)首屏的寬度和高度作為參考點(diǎn)调煎，而不是以整個(gè)網(wǎng)頁(yè)的寬度和高度作為參考點(diǎn)
一個(gè)絕對(duì)定位的袁術(shù)會(huì)忽略祖先元素的 padding
絕對(duì)定位-子絕父相
相對(duì)定位的弊端：
相對(duì)定位不會(huì)脫離標(biāo)準(zhǔn)流，會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間己肮，所以不利于界面布局
絕對(duì)定位弊端：
默認(rèn)情況下絕對(duì)定位的元素會(huì)以 body 作為參考點(diǎn)士袄，所以會(huì)隨著瀏覽器的寬度高度的變化而變化
子絕父相
子元素用絕對(duì)定位，父元素用相對(duì)定位
絕對(duì)定位-水平居中
如何讓絕對(duì)定位的元素水平居中
只需要設(shè)置絕對(duì)定位元素的 left:50%; 然后再設(shè)置絕對(duì)定位元素的 margin-left: - 元素寬度的一半 px;
