Question

深入理解 position: relative;

Answer 1

先插一嘴定位的其它值，最初学习positive的时候，只是对position: absolute的意思不明白:

不明觉厉，在项目中遇到坑的时候才真正理解 已定位的祖先元素 是说当前标签的父级元素应该是absolue、或者relative的时候，子标签才可以用绝对定位。当时很是欣喜，以为对position已经完全掌握，然而...
元旦前在做一个项目的时候如下界面:

大致看了一眼，没什么难度啊，一直用 position: relative;设置top 就好了啊

事实上，在给从上到下的元素都用relative之后，整个界面的布局并不像预期的一样，第一个设置position: relative;的元素正常，下面设置position: relative;的元素会往浏览器上移before元素的 -top px值。
百思不得骑姐...
旁边坐了一个vue leader：查看一下盒模型！

擦，为什么会有一个 -50的东西出现？浏览器解析的css样式中并没有设置这样一个东西。
本来以为在给标签设置

之后，下面跟着的元素就会跟着一起往下排，显示结果表明很可能是自己对 position: relative;的理解有偏差，搜了好久，发现了这样一句话:
position: relative;只是在视觉上显示出有偏差
这时候我们再看文档中:

就是说标签其实在DOM中还占据着原始的位置，只是在视觉上给人偏移的错觉。这样就可以合理解释为何第二个往后设置relative的元素没有跟着往下排列。很自然的，既然还占着原来的位置，那就手动设置 margin-bottom: 15px;就可以实现真正意义上的DOM位置偏移。