position

1、父集设置了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>

 

2、

#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;
}

3、若子类为absolute且设置了top和left，但祖先类没有设置relative或者absolute的话，则以body的border定位。若祖先类有多个设置了relative或者absolute的话，则以最近祖先的border定位；

 

4、通常写法

#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;
}