CSS 中position定位的三种方法比较

1. 相对定位

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

.box-1{
	width: 94%;
	height: 500rpx;
	background-color: #ffffff;
	box-shadow:1px 1px 3px #b3b3b3;  /*外框阴影*/
	border-radius: 10rpx;	
	position: relative; /*相对定位*/
	left: 3%;
	top: -100rpx;
	/*相对定位，向上移动100rpx后，底部还保留着100rpx的占位空间，用margin-bottom来消除占位*/
	margin-bottom: -40px;
}

2. 绝对定位

absolute：相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即浏览器窗口定位。设置了absolute的元素脱离文档流，脱离后原来的位置相当于是空的，下面的元素会来占据位置。元素在没有设置宽度的情况下，宽度由元素里面的内容决定。

.box-1{
	width: 94%;
	height: 500rpx;
	background-color: #ffffff;
	box-shadow:1px 1px 3px #b3b3b3;  /*外框阴影*/
	border-radius: 10rpx;	
	position: absolute;  /*绝对定位*/
	left: 3%;
	top: 300rpx;
}

3. 固定定位

fixed：相对于浏览器窗口进行定位，不会随着页面滚动，一般用于导航栏吸顶效果。

.box-1{
	width: 94%;
	height: 500rpx;
	background-color: #ffffff;
	box-shadow:1px 1px 3px #b3b3b3;  /*外框阴影*/
	border-radius: 10rpx;	
	position: fixed;  /*固定定位*/
	left: 3%;
	top: 300rpx;
}