在学习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框。