总结绝对定位和相对定位

 定位分为4种:
1:static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
(2)absolute元素框偏移某个距离。http://www.w3cfuns.com/thread-258-1-1.html

  无父级:参照浏览器左上角

  有父级:父级无position,参照浏览器左上角

      父级有position,参照父级左上角
(3)relative元素框从文档流完全删除,并相对于其包含块定位。

  无父级:参照自身原来在文档流中位置的左上角

  有父级:父级无position,参照自身原来在文档流中位置的左上角

      父级有position:有padding,参照padding

              无padding,参照自身原来在文档流中位置的左上角

(4)fixed元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

  始终不动
总结:如果用定位来布局来定位页面,父级元素的Position 的属性必须设置为relative,而位于父级内部的某个元素最好用absolute,因为他不会受父级元素padding的影响,当然你也可以用relative,但不要忘记计算padd的值

原文地址:https://www.cnblogs.com/BaishangBloom/p/4642477.html