html中position有三个值：relative、absolute、fixed。
首先说position:relative，相对定位，指的是元素本身定位。开启元素相对定位之后，
1.元素不会脱离文档流；
2.可以给元素设置top、bottom、left、right值；
3.可以给元素提升一个层级；
4.设置了相对定位元素，原来是内联元素现在还是内联元素，原来是块状元素，现在还是块状元素。
例：有3个块状元素，想要将box2移到box3的右边，通常可以给box2设置margin-top、margin-left值实现，具体如下：
但是我们 发现给box2设置margin-top、margin-left值后，box2并没有到box3的右边，box3同时也下移了100px。
此时我们可以通过给box2设置position:relative，并设置left、right、top、bottom等偏移值来实现。
如图：
但是如果box2在水平方向上是偏移了50px，则box2会将box3遮住一部分，而不是box3会将box2遮住一部分，因为box2设置了position:relative后，层级提升了一个等级。
具体如图：
给元素添加了position:relative后，块状元素还是块状元素，内联元素还是内联元素。
然后说position:absolute绝对定位，
1.设置position:absolute的元素会脱离文档流
2.会提升一个层级，遮住其他元素
3.设置top、bottom、left、right时偏移量是相对于最近的一个父元素偏移
4.会将内联元素变成块状元素。
示例：
有box1、box2、box3，高度一样，宽度不一样，给宽度最小的box1设置position：absolute后，他会脱离文档流，并且会提升一个层级，盖住box2的一部分。
如果给具有position：absolute的元素设置偏移量的话，会发现他的偏移和position：relative的偏移有所不同，它是相对于他最近的父元素进行偏移。如图：
如果给他的父元素body设置一个margin：0，padding：0后，元素偏移就正常了。
如图：
设置了position：absolute的元素，内联元素会变块状元素。
如图：
position：fixed，相对于浏览器窗口固定定位。
无论怎么滚动滚动条，设置了position：fixed的元素总是在距离浏览器窗口固定位置。
如图：
设置了position:absolute和position:relative的元素都会进行层次的提升，如果3个元素都设置了position定位，层级关系是怎么样的呢？
示例如图：
如果3个都设置了position定位，box2会盖住box1，box3会盖住box2，即html结构中下面的元素会盖住上面的元素。
