定位流分類
1.相對定位
定義:相對于自己以前在標(biāo)準(zhǔn)中的位置來移動。
注意點(diǎn):
1.相對定位是不會脫離標(biāo)準(zhǔn)流的,會繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間。
2.在相對定位中同一方向上的定位只能使用一個(gè)。
3.由于相對定位是不會脫離標(biāo)準(zhǔn)流的,所以相對定位是區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的。
4.由于相對是不會脫離標(biāo)準(zhǔn)流的,并且相對定位的元素會占用標(biāo)準(zhǔn)流的位置,所以當(dāng)給相對定位的元素設(shè)置margin/paddingdeng屬性時(shí)會影響到標(biāo)準(zhǔn)流的布局。
相對定位應(yīng)用場景
1.用于對元素進(jìn)行微調(diào)。
2.配合絕對定位來使用
2.絕對定位
定義:絕對定位是相對于body來定位的。
注意點(diǎn):
1.絕對定位的元素會脫離標(biāo)準(zhǔn)流的。
2.絕對定位是不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的。
絕對定位參考點(diǎn):
規(guī)律:
1.默認(rèn)情況下絕對定位的元素,無論有沒有祖先元素(父元素,爺爺元素...),都會以body作為參考點(diǎn)
2.如果一個(gè)絕對定位有祖先元素,并且祖先元素也是定位流,那么這個(gè)絕對定位元素就會以定位流的那個(gè)祖先元素作為參考點(diǎn)。
2.1只要是這個(gè)絕對定位元素的祖先元素都可以。
2.2上面的定位流指的是絕對定位/相對定位/固定定位。
2.3 定位流中只有靜態(tài)定位不可以作為定位流來定位。
3.如果一個(gè)絕對定位的元素有多個(gè)祖先元素,并且祖先元素有多個(gè)元素都是定位流,那么那個(gè)絕對定位的元素就會以離它最近的那個(gè)定位流的祖先元素作為參考點(diǎn)。?
注意點(diǎn):
1.如果一個(gè)絕對定位的元素時(shí)以body作為參考點(diǎn),那么其實(shí)是以網(wǎng)頁首屏的寬度和高度作為參考點(diǎn),并不是以整個(gè)網(wǎng)頁的寬度和高度作為參考點(diǎn)的。
2.一個(gè)絕對定位的元素會忽略祖先元素的padding
如何讓絕對定位的元素水平居中?
1.只需要設(shè)置絕對定位元素的left:50%;
2.然后設(shè)置絕對定位元素的margin-left:-元素寬度的一半px;
固定定位:
1.背景定位可以讓背景圖片不隨著滾動條的滾動而滾動,而固定定位可以讓某個(gè)盒子不隨著滾動條的滾動而滾動。
注意點(diǎn):
1.固定定位的元素是脫離標(biāo)準(zhǔn)流的,不會占用標(biāo)準(zhǔn)流中的空間
2.固定定位和絕對定位一樣不區(qū)分行內(nèi)元素/塊級元素。