CSS position属性、float属性

1、relative:
　定义为relative的元素脱离正常的文本流，但其在文本流中的位置依然存在
　无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的padding属性会对其影响（会以内容区域的左上角为原点，进行定位。）
注：
　Top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只有Top起作用。
　left的值表示对象相对原位置向右偏移的距离，right的值表示对象相对原位置向左偏移的距离，两者同时存在时，只有left起作用。
2、absolute:
　定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。
　如果想把一个div定位到父级元素内，需要满足：
　 　1）设定TRBL
　 　2）父级设定position属性
　Top的值表示对象上边框与浏览器窗口顶部的距离，bottom的值表示对象下边框与浏览器窗口底部的距离，两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。
　left的值表示对象左边框与浏览器窗口左边的距离，right的值表示对象右边框与浏览器窗口右边的距离，两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
　在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

relative与absolute的主要区别

首先，是上面已经提到过的在正常流中的位置存在与否。
其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位

总结：
如果用position来进行页面布局，父级元素的position属性必须为relative,而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素padding的影响。
注：绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
https://blog.csdn.net/jingtian678/article/details/64439712
http://www.javashuo.com/article/p-qyszpmvh-g.html （非常赞的文章）
https://www.cnblogs.com/kingofcorn/p/5552128.html

float属性

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档流，所以文档流中的其它元素块框表现得就像浮动框不存在一样。定位时，与margin与padding相关。
https://blog.csdn.net/akmumu/article/details/41078511 (非常赞的文章)