[toc] ## relative定位是相对于自身的 ## 但其百分比值是相对于包含块的 ## 定位偏移无侵入 相较于margin，若使用margin进行偏移是会**带动**其后面元素的。 而relative偏移是没有任何连带影响的(同其它定位偏移) ## 对立方向定位置谁有效取决于文档流顺序 默认文档流顺序为从左往右、从上往下 故默top/bottom同时存在时top有效，left/right同时存在时left有效 ## relative的最小化影响原则 - 尽量不使用realative，如果想定位某些元素，看看是否使用"无依赖绝对定位" - 如果场景受限，一定要使用relative，则该relative务必最小化。 ``` <div> <img src=.../> <p>内容1</p> <p>内容2</p> <p>内容3</p> </div> ``` 此时若img要定位则不要直接在外层的div设置，而是将img包裹一层空div，在空div上设置relative 这个空div因为是空的不会影响布局（高度为0），并且充当了定位基准，最小化了relative的范围