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

上一篇:无障碍开发(二)之ARIA role属性


下一篇:命令控制台与java环境配置