什么时候用相对定位或绝对定位
要理解定位你要先理解文档流，在文档流中相对定位的元素占有位置，而且会影响后面的元素（块元素、行内块元素），比如两个div并排，另外一个会换行。
<div>111</div>
<div>222</div>
而绝对定位就是把该元素从文档流中踢出，不会占用文档流的位置，也不会影响后面的元素。
<div style="position: absolute;">111</div>
<div>222</div>
如上面的实例，111和222会重叠，审查元素你会发现222有实际位置，111没有位置。他是使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位，如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义 。
<div>111</div>
<div>222</div>
而绝对定位就是把该元素从文档流中踢出，不会占用文档流的位置，也不会影响后面的元素。
<div style="position: absolute;">111</div>
<div>222</div>
如上面的实例，111和222会重叠，审查元素你会发现222有实际位置，111没有位置。他是使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位，如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义 。
网页布局涉及到各种设备各种分辨率下的兼容，所以就注定绝对定位不能适用于大部分场景。。所以布局只能依赖于上级元素的位置，而不能依赖于设备的高度和宽度。
适合绝对定位的场景主要是一些页面辅助功能
原文链接：https://blog.csdn.net/whoops_butterfly/article/details/77937750
