## 定位流
# 相對(duì)定位
# 絕對(duì)定位
# 子絕父相
# 固定定位
# z-index屬性
定位的元素會(huì)蓋住沒(méi)有定位的元素
1.定位流分類(lèi)
1.1 相對(duì)定位
1.2絕對(duì)定位
1.3固定定位
1.4靜態(tài)定位
2.什么是相對(duì)定位?
相對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)流匯總的位置來(lái)移動(dòng)
-格式
position : relative;
top: ;
right: ;
bottom: ;
left: ;
3.相對(duì)定位注意點(diǎn)
3.1 相對(duì)定位是不脫離標(biāo)準(zhǔn)流的,會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間
3.2 在相對(duì)定位中同一個(gè)方向上的定位屬性只能使用一個(gè)
3.3 相對(duì)定位是不脫離標(biāo)準(zhǔn)流的,所以在相對(duì)定位中是區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的
3.4 相對(duì)定位是不脫離標(biāo)準(zhǔn)流的,并且相對(duì)定位的元素會(huì)占用標(biāo)準(zhǔn)流中的位置,所以當(dāng)給相對(duì)定位的元素設(shè)置margin/padding等屬性時(shí)會(huì)影響到標(biāo)準(zhǔn)流的布局
4.相對(duì)定位應(yīng)用場(chǎng)景
4.1 用于對(duì)元素進(jìn)行微調(diào)
4.2 配合后面學(xué)習(xí)的絕對(duì)定位來(lái)使用
1.什么是絕對(duì)定位?
絕對(duì)定位就是相對(duì)于body來(lái)定位
position: absolute;
2.絕對(duì)定位注意點(diǎn)
2.1 絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的
2.2 絕對(duì)定位的元素是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的
3.規(guī)律
3.1 默認(rèn)情況下所有的絕對(duì)定位的元素,無(wú)論有沒(méi)有祖先元素,都會(huì)以body作為參考點(diǎn)
3.2 如果一個(gè)絕對(duì)定位的元素有祖先元素,并且祖先元素中有一個(gè)是定位流中的元素,那么這個(gè)這個(gè)絕對(duì)定位的元素就會(huì)以定位流的那個(gè)祖先元素作為參考點(diǎn)
3.3 如果一個(gè)絕對(duì)定位的元素有祖先元素,并且祖先元素中有多個(gè)是定位流中的元素,那么這個(gè)絕對(duì)定位的元素會(huì)以它最近的那個(gè)定位流的祖先元素為參考點(diǎn)
注意點(diǎn)
1.如果一個(gè)絕對(duì)定位的元素是以body作為參考點(diǎn),那么其實(shí)是以網(wǎng)頁(yè)首屏作為參考點(diǎn),而不是以整個(gè)網(wǎng)頁(yè)的寬高作為參考點(diǎn),且不會(huì)隨著滾動(dòng)條滾動(dòng)而滾動(dòng)
2.一個(gè)絕對(duì)定位的元素會(huì)忽略祖先元素的padding
# 子絕父相
相對(duì)定位弊端:
相對(duì)定位不會(huì)脫離標(biāo)準(zhǔn)流,會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間,所以不利于布局
絕對(duì)定位弊端:
默認(rèn)情況下絕對(duì)定位的元素會(huì)以body作為參考點(diǎn),所以會(huì)隨著瀏覽器的寬高的變化而變化
子絕父相
子元素用絕對(duì)定位
父元素用相對(duì)定位
1.如何讓絕對(duì)定位的元素水平居中
只需要設(shè)置絕對(duì)定位元素的left: 50%;
再設(shè)置margin-left: -寬度的一半;
1.什么是固定定位
固定定位會(huì)脫離標(biāo)準(zhǔn)流,固定定位和前面學(xué)習(xí)的背景關(guān)聯(lián)方式很像,背景關(guān)聯(lián)方式可以讓某個(gè)圖片不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng),而固定定位可以讓某個(gè)盒子不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
position: fixed;
注意點(diǎn):
1.固定定位的元素是脫離標(biāo)準(zhǔn)流的,不會(huì)占用標(biāo)準(zhǔn)流中的空間
2.固定定位和絕對(duì)定位一樣,不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
1.什么是z-index屬性?
默認(rèn)情況下所有元素都有一個(gè)默認(rèn)的z-index屬性,取值是0,z-index屬性的作用就是專(zhuān)門(mén)用于控制定位流元素的覆蓋關(guān)系
1.默認(rèn)情況下,定位流的元素會(huì)蓋住標(biāo)準(zhǔn)流的元素
2.默認(rèn)情況下定位流的元素后面編寫(xiě)的會(huì)蓋住前面編寫(xiě)的
3.如果定位流的元素設(shè)置了z-index,那么誰(shuí)的z-index屬性比較大,誰(shuí)就是顯示在上面
注意點(diǎn):
1.從父現(xiàn)象
1.1 如果兩個(gè)元素的父元素都沒(méi)有設(shè)置z-index屬性,那么誰(shuí)的z-index屬性比較大誰(shuí)就顯示在上面
1.2 如果兩個(gè)圓的父元素設(shè)置了z-index屬性,那么子元素的z-index屬性就會(huì)失效,也就是說(shuō)誰(shuí)的父元素的z-index屬性比較大誰(shuí)就顯示在上面
z-index應(yīng)用場(chǎng)景:
控制界面上的定位元素的覆蓋關(guān)系,例如網(wǎng)頁(yè)中后面的定位元素不能覆蓋前面的導(dǎo)航條通欄
絕對(duì)定位中如何使元素在網(wǎng)頁(yè)中居中?
left: 50%;
margin-left: 子元素寬度的一半px;
