先插一嘴定位的其它值，最初学习positive的时候，只是对position: absolute的意思不明白:
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
不明觉厉，在项目中遇到坑的时候才真正理解已定位的祖先元素是说当前标签的父级元素应该是absolue、或者relative的时候，子标签才可以用绝对定位。当时很是欣喜，以为对position已经完全掌握，然而...
元旦前在做一个项目的时候如下界面:
大致看了一眼，没什么难度啊，一直用 position: relative;设置top 就好了啊
.bind-phone-desc{
position: relative;
top: 15px;
margin-left: 30px;
font-size: 12px;
color: #999999;
}
事实上，在给从上到下的元素都用relative之后，整个界面的布局并不像预期的一样，第一个设置position: relative;的元素正常，下面设置position: relative;的元素会往浏览器上移before元素的 -top px值。
百思不得骑姐...
旁边坐了一个vue leader：查看一下盒模型！
擦，为什么会有一个 -50的东西出现？浏览器解析的css样式中并没有设置这样一个东西。
本来以为在给标签设置
position: relative;
top: 15px;
之后，下面跟着的元素就会跟着一起往下排，显示结果表明很可能是自己对 position: relative;的理解有偏差，搜了好久，发现了这样一句话:
position: relative;只是在视觉上显示出有偏差
这时候我们再看文档中:
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
就是说标签其实在DOM中还占据着原始的位置，只是在视觉上给人偏移的错觉。这样就可以合理解释为何第二个往后设置relative的元素没有跟着往下排列。很自然的，既然还占着原来的位置，那就手动设置 margin-bottom: 15px;就可以实现真正意义上的DOM位置偏移。
