position: relative;
top: 200px;
from the top push 200px
push就是推的意思,原来的样子再从上向下推200px的距离
css:
position: absolute;
left: 20px;
top: 30px;
within it`s nearest parent
from it`s parent left 20px top 30px
[color=red]absolute找最近的relative父容器:[/color]
如果.wrap不是relative的,那么最近的父容器就是body
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;
}
[color=red]absolute找最近的relative父容器:[/color]
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