relative

position: relative;

top: 200px; 

from the top push 200px

push就是推的意思，原来的样子再从上向下推200px的距离

css:

body {
	margin: 0;
}

.box {
	width: 400px;
	height: 400px;
	margin: auto;
	background-color: red;
	position: relative;
	top: 200px;
}

position: absolute; 
left: 20px;
top: 30px;

within it`s nearest parent
from it`s parent left 20px top 30px

body {
	margin: 0;
}

.box {
	width: 400px;
	height: 400px;
	margin: auto;
	background-color: red;
	position: absolute;  within it`s nearest parent
	left: 20px;
	top: 30px;
}

absolute找最近的relative父容器：

body {
	margin: 0;
}

.wrap {
	width: 800px;
	height: 1000px;
	margin: auto;
	position: relative;
	background-color: #e3e3e3;
}
.box {
	width: 400px;
	height: 400px;
	margin: auto;
	background-color: red;
	position: absolute;
	left: 20px;
	top: 30px;
}

如果.wrap不是relative的，那么最近的父容器就是body