css中绝对定位和相对定位用法

CSS中的定位属性分为两类，一种是绝对定位，一种是相对定位。两者在页面布局上有很大的作用，下面我们具体来了解一下绝对定位和相对定位的用法。

/*绝对定位*/
	position: absolute;
	top: 10px; /*距离上方10px*/
	left: 20px; /*距离左边20px*/
	right: 30px; /*距离右边30px*/
	bottom: 40px; /*距离底部40px*/

/*相对定位*/
	position: relative;
	top: 50px; /*距离原来位置向下50px*/
	left: 60px; /*距离原来位置向右60px*/ 

绝对定位和相对定位的共同点是都需要指定一个坐标值，其中绝对定位主要是相对于父元素或顶级容器进行定位，而相对定位则是相对于自身原来的位置进行定位。换句话说，绝对定位的元素会脱离文档流，而相对定位的元素则不会脱离。

另外，当一个元素同时使用了绝对定位和相对定位时，它会优先使用绝对定位的位置。