CSS中相对定位和绝对定位常常会使初入的新人感到困惑，我本人也是深受其害！今天详细的给大家说一下相对定位和绝对定位的区别，也是对自己的一种复习。
一、相对定位 position: relative;
根据w3cschool里的介绍，相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
也就是说，当开启相对定位时，元素的移动是以自身为基准进行平移，同时自己本身的空间会进行保留，不会被其他元素给占据。而且还会激活z-index属性，其层叠级别高于原本的文档流时将会进行覆盖。
二、绝对定位 position: absolute;
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
与相对定位不同的是，绝对定位是相对于自己的父辈元素进行平移，若自己的父辈没有开启相对定位，则元素相对于body转移位置。若自己的父辈全部开启定位，则会对离自己最近的父辈元素进行平移，但是若只开启定位没有进行平移，则会在原来位置脱离文档流。还有一个不同的点是，绝对定位自身的空间会被其他元素占有，同时也会激活z-index属性，其层叠级别高于原本的文档流时将会进行覆盖。
如果觉得《CSS相对定位和绝对定位的区别》对你有帮助，请点赞、收藏，并留下你的观点哦！
