定位
相對(duì)定位
對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來(lái)移動(dòng)
格式:
position: relative;
相對(duì)定位注意點(diǎn):
1. 在相對(duì)定位中同一個(gè)方向上的定位屬性只能使用一個(gè)
top/bottom 只能用一個(gè)；left/right 只能用一個(gè)
2. 相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間
3. 由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 所以在相對(duì)定位中區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
4. 由于相對(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ì)于body或者某個(gè)定位流中的祖先元素來(lái)定位
絕對(duì)定位注意點(diǎn):
1. 絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的, 不會(huì)占用標(biāo)準(zhǔn)流中的位置
2. 由于絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的, 所以絕對(duì)定位的元素不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
3. 如果一個(gè)絕對(duì)定位的元素是以body作為參考點(diǎn), 那么其實(shí)是以網(wǎng)頁(yè)首屏的寬度和高度作為參考點(diǎn), 而不是以整個(gè)網(wǎng)頁(yè)的寬度和高度作為參考點(diǎn)（相對(duì)于body定位會(huì)隨著頁(yè)面的滾動(dòng)而滾動(dòng)）
4. 一個(gè)絕對(duì)定位的元素會(huì)忽略祖先元素的padding
絕對(duì)定位參考點(diǎn):
1. 默認(rèn)情況下所有的絕對(duì)定位的元素, 無(wú)論有沒(méi)有祖先元素, 都會(huì)以body作為參考點(diǎn)
2. 如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素中有一個(gè)是定位流中的元素, 那么這個(gè)絕對(duì)定位的元素就會(huì)以定位流的那個(gè)祖先元素作為參考點(diǎn)
3. 如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素中有多個(gè)是定位流中的元素, 那么這個(gè)絕對(duì)定位的元素會(huì)以離它最近的那個(gè)定位流的祖先元素為參考點(diǎn)
絕對(duì)定位水平居中
1. 注意當(dāng)一個(gè)盒子絕對(duì)定位之后不能使用margin: 0 auto;讓盒子自身居中
2. 如果想讓過(guò)一個(gè)絕對(duì)定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素寬度一半px;
絕對(duì)定位應(yīng)用場(chǎng)景:
用于對(duì)元素進(jìn)行微調(diào)
配合后面學(xué)習(xí)的絕對(duì)定位來(lái)使用
子絕父相
企業(yè)開(kāi)發(fā)中一般相對(duì)定位和絕對(duì)定位都是一起出現(xiàn), 很少單獨(dú)使用
相對(duì)定位和絕對(duì)定位一般都是用來(lái)做覆蓋效果的, 當(dāng)看到某個(gè)元素覆蓋在另外一個(gè)元素上時(shí), 第一時(shí)間就要想到定位流
固定定位
固定定位和前面學(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. 由于固定定位的元素是脫離標(biāo)準(zhǔn)流的, 所以絕對(duì)定位的元素不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
3. IE6不支持固定定位
固定定位應(yīng)用場(chǎng)景:
1. 網(wǎng)頁(yè)對(duì)聯(lián)廣告
2. 網(wǎng)頁(yè)頭部通欄(穿透效果)
靜態(tài)定位
默認(rèn)情況下標(biāo)準(zhǔn)流中的元素position屬性就等于static, 所以靜態(tài)定位其實(shí)就是默認(rèn)的標(biāo)準(zhǔn)流
靜態(tài)定位應(yīng)用場(chǎng)景:
一般用于配合JS清除定位屬性
z-index屬性
用于指定定位的元素的覆蓋關(guān)系
定位元素的覆蓋關(guān)系:
1. 默認(rèn)情況下定位的元素一定會(huì)蓋住沒(méi)有定位的元素
2. 默認(rèn)情況下寫(xiě)在后面的定位元素會(huì)蓋住前面的定位元素
3. 默認(rèn)情況下所有元素的z-index值都是0, 如果設(shè)置了元素的z-index值, 那么誰(shuí)比較大誰(shuí)就顯示在前面
4. 定位元素的從父現(xiàn)象
4.1 父元素沒(méi)有z-index值, 那么子元素誰(shuí)的z-index大誰(shuí)蓋住誰(shuí)
4.2 父元素z-index值不一樣, 那么父元素誰(shuí)的z-index大誰(shuí)蓋住誰(shuí)
z-index應(yīng)用場(chǎng)景
控制界面上的定位元素的覆蓋關(guān)系, 例如網(wǎng)頁(yè)中后面的定位元素不能覆蓋前面的導(dǎo)航條通欄
