在CSS中,绝对定位(absolute)和相对定位(relative)是非常常用的两个属性。他们的作用是可以让元素根据父元素或某个参考点进行位置调整。
/* relative相对定位 */ .relative { position: relative; top: 10px; left: 20px; } /* absolute绝对定位 */ .absolute { position: absolute; top: 50px; left: 50px; }
相对定位(relative)是相对于元素在正常文档流中的位置,进行位置的调整。使用相对定位时,需要配合使用top、bottom、left、right等属性来指定相对于原本位置的偏移量。
绝对定位(absolute)是相对于其最近的“已定位”父元素进行定位,在没有找到已定位的父元素时,会以文档的body元素作为参考进行定位。使用绝对定位时,同样需要配合使用top、bottom、left、right等属性来指定定位的位置。
/* 定位元素 */绝对定位的元素
需要注意的是,定位的元素必须要给出position属性才能生效。当position属性为relative时,参照的基准点是元素在文档流中的位置,如果是absolute,参考的基准点是其最近的"非static"定位父级元素;如果没有“非static”定位的元素,基准点将是文档的body。