相对定位的元素，本体还在原来的地方
先来看段代码：
<html> <head> <style type="text/css"> /*取出默认样式*/ *{ margin: 0; } /*使用百分比设置高度时，要先这样*/ html, body{ height: 100%; } /*类为left的盒子左浮动*/ .left{ width: 30%; height: 100%; float: left; background-color: skyblue; } /*类为right的盒子相对定位*/ .right{ width: 70%; height: 100%; position: relative; left: 30%; background-color: yellowgreen; } /*right盒子的子类盒子into_right左浮动*/ .right .into_right{ float: left; width: 30%; height: 30%; background-color: green; } </style> </head> <body> <div class="left"></div> <div class="right"> <div class="into_right"> </div> </div> </body> </html>看运行结果，是否和我们想的一致
可以看到，into_right并没有像我们想的一样跑到right的最左边，那是为什么呢？
去掉right盒子的相对定位，
.right{ width: 70%; height: 100%; background-color: yellowgreen; }再次看结果
发现了什么？into_right的盒子跑到了左上角，但是在right盒子中的相对位置没有改变。换句话说，分析相对定位时，要先分析相对定位前的样式，然后将相对定位的盒子原封不动的移动
其实上面的话的原因就是因为相对定位后，元素的本体还在原来的地方
