CSS学习时间不长，position的问题一直绕不清。今天系统学习，并整理如下：
html{ font-size: 100%;height: 100%; }
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #fff;
background: #ADD8E6;
overflow: hidden;
padding: 0;
margin: 0;
100%;
height:100%;
}
为了效果明显，同时在页面上画了2条参考线
一、position=relative 其中page1和page2是同一级对象，都直接以body为父元素
1.最初位置
.page1{
30%;
height:30%;
background-color: #fDD8E6;
position:relative;
}
.page2{
30%;
height:30%;
background-color: #ccccc6;
position:relative;
}
效果：
2. 改变page1和page2的top、left，重复部分就不写了
.page1{
top:10%;
left:30%;
}
.page1{
top:10%;
left:30%;
}
从效果可以看出，当position：relative时，元素移动是相对其本身的原始位置移动的，移动的距离则是相对其父元素。比如，page2的top为10%；则其relative的位置是相对page2原来的位置移动了父元素的width*10%。
3.当page2是page1 的子元素时
.page1{
30%;
height:30%;
background-color: #fDD8E6;
position:relative;
}
.page2{
30%;
height:30%;
background-color: #ccccc6;
position:relative;
}
效果如下：
那么page2 的大小是相对其父元素page1来的。
4.当page1仍然是page2 的父元素，page1位置不变，page2的位置设置为
top:10%;
left:30%;
效果如下：
当page1的position改为absolute时，效果是一样的：
所以，page2的位置和大小都是相对page1改变的，不管page1的position是relative还是absolute。
4.如果
page1{
position: absolute;
top:30%;
left:30%;
}
Page1{
position: relative；
}
会是什么效果呢?
所以relative只是相对父元素变动，再试想一下，
page1{
position: relative;
top:30%;
left:30%;
}
Page1{
position: relative；
}
和
page1{
position: relative;
top:30%;
left:30%;
}
Page1{
position: relative；
top:30%;
left:30%;
}
Relative终于搞透了。
通过以上实验，absolute相信你也懂了。无论是absolute还是relative，都是只看父元素的。