对于(例如元素div1)position:absolute时,是相对于已定位的最近父元素,如果没有已定位的父元素,则相对于初始包含块(html)
其中这里说的"已定位的父元素"是指position属性为relative,absolute,fixed的元素,如果position的值为static或不存在,则div1则absolute则不相对于该父元素,而是相对于初始包含块。
在一个一个框包含另一个框中,
eg:
<div class="one">
<div class="two"></div>
</div>
div.two相对于div.one进行定位,
如果div.two为absolute定位,则不考虑div.one的padding效果。但是会考虑div.two自身的margin效果。
如果div.two为relative定位,是相对与自身进行定位,要考虑div.one的padding效果。
eg:例如
<style>
.one
{
position:relative;
margin:auto;
400px;
height:400px;
border:2px solid blue;
box-sizing:border-box;
}
.two
{
margin:20px;
top:0px;
left:0px;
position:absolute;
200px;
height:200px;
border:2px solid red;
}
</style>
当.two(position:absolute)中的top:0px left:0px 时既使div.one有padding值,但是div.two还是贴着div.one的左上角。但是div.two有margin值时,要考虑margin的效果,div.two的左上角不在贴着div.one的左上角。