2018-06-11 相对定位 绝对定位

在学习CSS的过程中许多新手都在纠结于相对定位和绝对定位到底有什么区别，为了解答新手的疑惑，希望可以帮助到大家。

相对定位：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

.relative{ position: relative; background:purple; width:50px; height: 50px; left: 80px; } 这个框会出现在跟原来的位置向右80px的地方，原来的位置为空，如果position: relative改成position: absolute,则这个框的原来空间会被下面的框所覆盖。

经对定位：绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

.box{ width:300px; height: 300px; margin: 0 auto; border: 1px solid orange; position: relative; } .relative{ position:absolute; background:purple; width:50px; height: 50px; left: 80px;}

box是relative的父元素，标识为relative 的框会出现在向右 80px的地方，但是如果父元素box没有定位属性，它则会相对body进行定位，位置会大变，会脱离box框。