什么时候用绝对定位，什么时候用相对定位

Question

我知道相对定位和绝对定位的定义。但是不知道在什么场合下，合理的使用。有时候写代码觉得两者没有区别。只是参考对象不一样。我项目经验少，各位大神指点下。

Answer 1

同楼上，你可以理解为只有相对定位。。。但是有些错误要纠正一下。

要理解定位你要先理解文档流，在文档流中相对定位的元素占有位置，而且会影响后面的元素（块元素、行内块元素），比如两个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属性定义 。

网页布局涉及到各种设备各种分辨率下的兼容，所以就注定绝对定位不能适用于大部分场景。。所以布局只能依赖于上级元素的位置，而不能依赖于设备的高度和宽度。

适合绝对定位的场景主要是一些页面辅助功能：

弹窗：这个没得说，弹窗的位置肯定是要固定的。

Answer 2

你可以理解成只有相对定位，没有绝对定位。绝对地位只是基于浏览窗口（如果我没记错的话，这说法可能不严谨），相对定位是相对于父元素。然而父元素是浏览窗口时，它就同时是相对定位和绝对定位了。所以时刻搞清楚父元素是哪个，子元素使用绝对定位，父元素使用相对定位，个人使用经验很好掌控位置。你可以按照你自己喜欢的方式来进行。

之后接触到响应式时使用手法会有调整，所以现在这个阶段不必想太多按照自己手法吸取多点实践经验。

Answer 3

相对定位：占用原先位置，会影响后面元素排版，适用于微调该元素位置
绝对定位：脱离标准文档流，适用于覆盖其他元素

Answer 4

绝对定位可以用在相对定位内，那么0点坐标就是拥有相对定位属性元素的左上角位置。实际应用中灵活性很大。