今天在做案例的时候用到了相对定位和绝对定位，简单说一下他们的区别。我们通过css做元素定位的时候要用到position，而position有4个值，分别是absolute，static，relative，fixed这四个值。
默认值为static，相对定位有relative，而剩余两种则是绝对定位。
相对定位和绝对定位的区别
既然命名不一样，那么定位的方法肯定是有去别的。我们首先来看一下不加定位的效果.
四个div的class分别为box1box2box3box4然后我们添加一下定位效果来看看。
其实可以预料到，我们如果只添加定位效果的话，除了relative没效果以外，其余的都有效果，不过都是差不多的，相当于原来的那个地方没有了元素，其余的向上替代了。
但是relative是真的没效果么？其实不然，我们需要添加一下位移效果才能看出来。简单添加上top:50px;left:50px后发现效果出现了。
看到这个效果，我们就可以直到了，原来relative需要添加位移效果才能体现出来。
这样再来看一下relative的解释
relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局这个是相对与原来的位置进行移动的，所以我们如果不添加位移效果的话，是看不到的。 而我们使用绝对定位呢？这个就是可以直接看到效果了. 我们直接看一下使用最多的absolute的解释。
absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位实际上，这个绝对定位是要看它的父元素的设置，毕竟是子元素。 如果我们父元素不设置定位效果，那么我们的子元素就是相对于根元素来进行定位的。简单看一下效果
会发现还是像我们上面所说的，原本的元素的位置会去掉，而下面的元素则会取代之前元素的位置，我们只需要给设置了absolute的元素设置上偏移，则会出现偏移效果了。
而如果父元素设置了定位效果，那么子元素就会寻找最近的设置了绝对或者相对定位的父元素来进行定位。
总结一下：
relative：relative定位是相对于自身位置来进行定位的。设置了relative定位的元素仍然位于原来的位置，元素的宽高不变，其设置的偏移量也不会影响到其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
absolute：absolute定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。
最后简单的发一下最后效果图的代码吧。<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="author" content="xuyunfei">
<meta name="description" content="">
<meta name="keywords" content="test,html">
<title>test</title>
<style>
div {
height: 100px;
}
.box1 {
background-color: blue;
}
.box2 {
background-color: red;
position: absolute;
left: 50px;
}
.box3 {
background-color: green;
}
.box4 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">box1box1box1box1box1box1</div>
<div class="box2">box2box2box2box2box2box2</div>
<div class="box3">box3box3box3box3box3box3</div>
<div class="box4">box4box4box4box4box4box4</div>
</body>
</html>
可以看到实际上，定位的偏移是通过right，left，top，bottom来进行位移，而如果不设置的话，那么应该不是没有变化就是空出了一个原本的位置来给后面的元素。
如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。