position

一、父集設置了relative，子集的absolute要設置top和left的值，否則父集的padding值會影響到子集的位置；

#first{
width: 200px;
height: 100px;
border: 1px solid red;
margin:40px;/*子集的位置不受祖先類的margin值得影響*/
position: relative;

padding:50px;
}
#second{
width: 200px;
height:100px;
border: 1px solid blue;
position: absolute;
top:20px; /*若不設置top和left的話，#first裏的padding值會影響id=「second」的div的位置。若設置了則#first裏的padding值就不會影響id=「second」的div的位置了，此時，id=「second」的div的位置只受祖先類的border進行的定位。  總結一下，就是absoulte是根據祖先類的border進行的定位，前提是absolute設置了top和left的值*/
left:20px;
}

 

<div id="first">first
<div id="second">second</div>
</div>

 

二、

#first{
width: 200px;
height: 100px;
border: 1px solid red;
margin:40px 400px;/*若margin:20px 30px;設置爲固定值，則position：absolute的話，#first對應的div的位置不會受到影響。若margin：0 auto;則position：absolute的話，#first對應的div的位置會受到影響,具體表現爲auto方向被改（左右方向），以#first對應的div的祖先類的border進行定位（這裏的祖先應該是body了）*/
position: absolute;

padding:50px;
}
#second{
width: 200px;
height:100px;
border: 1px solid blue;
position: absolute;
top:20px;
left:20px;
}

三、若子類爲absolute且設置了top和left，但祖先類沒有設置relative或者absolute的話，則以body的border定位。若祖先類有多個設置了relative或者absolute的話，則以最近祖先的border定位；

 

四、一般寫法

#first{
width: 200px;
height: 100px;
border: 1px solid red;
margin:0 auto;
position: relative;
padding:50px;
}
#second{
width: 200px;
height:100px;
border: 1px solid blue;
position: absolute;
top:20px;
left:20px;
}