position的取值主要有如下图：
官方给出的总是不那么容易懂得，所以有了以下简洁易懂的总结：
relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处于文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
absolute：定位是相对于离元素最近的设置了绝对定位或相对定位的父元素，如果没有父元素设置了绝对或相对定位，则元素相对于根元素即HTML元素定位。设置了absolute的元素脱离了普通文档流，元素在没有设置宽度的情况下，宽度由里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据该位置。
来源：https://www.cnblogs.com/kbinblog/p/10915379.html