CSS的绝对定位和相对定位的简单易懂

CSS中position(位置)其实有五个属性：absolute / fixed / relative / static / inherit 。

注意：static是position默认的，叫做静态定位，也就是没有定位。inherit 则是 从父元素继承 position 属性的值，也就是父元素是什么定位，它就是什么定位，另外一个知识点，相对定位不脱离文档流，而固定定位，绝对定位脱离文档流，脱离文档流（脱标）意思就是相当于我们的页面是地面，脱标的元素就像在天空中的浮云。

我们在项目中经常使用的有三个，也就是relative (相对定位) / absolute （绝对定位） / fixed（固定定位）。

相对定位relative是相对于原来的位置来说的，并且保留原有位置的空间。假设一个盒子设置了相对定位，原来的位置是(0,0)，我们在这时候设置了 top:20; left:20; ，那么这个盒子会移动到(20,20)的位置，它原来所在的那块，还是会保留一个空间，其它盒子无法占用。

绝对定位absolute一般是和相对定位relative搭配使用的，它移动的时候是对于它的祖先元素有没有定位（老大，如果没有老大就去找老大的老大）来移动的。

搭配使用的话也可以总结成“子绝父相”，也就是我们要在一个div盒子内放一个div小盒子，我们要设置小盒子的位置，可以给大盒子设置一个相对定位relative，小盒子设置绝对定位absolute，并且设置它要移动的top,button,left,right。

另外，并不是所有的子元素的定位都需要父元素是相对定位，千万不要被这个误导，父元素它也可以是绝对定位的。所以我们只需要知道，绝对定位就是根据它的祖先元素里离它最近的一个有包含定位盒子来进行移动的，所以只要div设计得当，父元素也可以是绝对定位。