相对定位、绝对定位的区别

相对定位：相对元素本身原有位置，在继续占着原来的位置的前提下偏移一定位置量

绝对定位：该元素会相对于父元素（父元素需要设置position属性，如果父元素没有设置，会继续向上寻找有position的元素，直到寻找到body）

1)定义两个块级元素div

<div class="css1">
</div> 
<div class="css2">
</div> 

样式表如下

 .css1{
height:200px;
width:200px;
background-color:blue;
}
 .css2{
height:200px;
width:200px;
background-color:orange;
}

运行效果如图：

2）相对定位走一波（给css1设置相对定位）

 .css1{
height:200px;
width:200px;
background-color:blue;
position:relative;
top:200px;
left:200px;
}

效果如图

扫描二维码关注公众号，回复： 6434843 查看本文章

这里可以看到第二个块级元素css2（黄色）并没有到上面空置的区域（因为上面整行仍被块级元素css1所占领）

3）绝对定位走起来（依然是让css1块级元素绝对定位，不过添加了一个父类元素，设置了position属性）

代码如下

 .css1{
height:200px;
width:200px;
background-color:blue;
position:absolute;
top:200px;
left:200px;
}

<div style="position:relative;">
<div class="css1">
</div> 
<div class="css2">
</div> 
</div>

效果如下

这里可以看到

块级元素css2已经占了原css1的位置 即绝对定位的元素不占原來的位置；