小伙伴們學(xué)習(xí)了12-6小節(jié)的絕對(duì)定位的方法：使用position:absolute可以實(shí)現(xiàn)被設(shè)置元素相對(duì)于瀏覽器（body）設(shè)置定位以后，大家有沒有想過(guò)可不可以相對(duì)于其它元素進(jìn)行定位呢？答案是肯定的，當(dāng)然可以。使用position:relative來(lái)幫忙，但是必須遵守下面規(guī)范：
1、參照定位的元素必須是相對(duì)定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
<div id="box2">相對(duì)參照元素進(jìn)行定位</div><!--相對(duì)定位元素-->
</div>
從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）。
2、參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來(lái)進(jìn)行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
這樣box2就可以相對(duì)于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）。
我也來(lái)試一試：我們把右側(cè)任務(wù)區(qū)中的box4當(dāng)做是圖片的講解文本。
具體要求：
1、把box4定位到圖片(box3)的底部。
效果圖如下：
1、相對(duì)于底部對(duì)齊使用bottom。
參考代碼如下：
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:99%;
position:absolute;
bottom:0;
left:0; /*這條css樣式可以省略*/
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)