今天练习某线上商城页面仿作的过程中，针对position:relative及position:absolute的使用技巧和疑惑点进行了一番梳理，学习了CSDN上onizukayao作者的一些理解方法，整理心得如下：

       1.首先查阅开发文档，position: absolute的意思是：

          绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

          position: relative的意思是：

          设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

       2.将relative（相对）与absolute（绝对）之间的关系先大致分为三类情形：

          ①包含关系：父级absolute，子级relative；

             正常情况下的效果同②，不过需要注意的是，当标签中包含文字时，relative会发生调整。

          ②包含关系：父级relative，子级absolute；

           是最常见的用法，来做到无论浏览器如何改变，子级标签都是相对浏览器的定位。

          效果如图

          ③并列关系：兄弟标签都是relative；

             当不存在父级元素包裹时，relative的相对位置是根据最近的一个兄弟作为参考的：

             但当a标签也设置了left、top等相关属性时，兄弟标签b继续以a变化前作为参考相对位置。

            先梳理到这里，后续有新发现会继续补充。