以下完全是个人理解哈，如有谬误，请多多指正。

网页就好像一张桌子的面，现在我们想让它上面的一个盒子里的一个小球移动有几个方法？

1. 绝对定位：移动盒子，移动盒子就相当于移动了小球嘛。结果盒子里的其他东西都会移动了。譬如，我假设这个整体是一个盒子，我只操作了使这个黑色背景向上移动10px,结果会是上面的“小球”跟着它一起移动。

2. 相对定位：只移动小球，完全不影响盒子里的其它部分。这个应该不难理解吧？同样以上面那个“盒子”为例，那样就会使黑色背景上的其它部分留在原地（背景应该会变成白色吧），而黑色背景向上移动了10px

3. 固定定位：把小球先用根绳子提起来，然后再在空中移动。而看网页的人相当于在看这个桌面的俯视图，不管他怎么折腾这张桌子，这下，小球相对于整张桌子的位置都不会变了。就比如这些部分（一些页脚的广告应该也是吧？）(http://www.imooc.com/code/2075)(http://xiazai.zol.com.cn/)

   
   

光谢谢 你可采纳人说的啊  真逗

排版布局上用啊，个人理解，就只是定位的参照物不同了。绝对定位，是参照浏览器来决定元素（例如图片A）的位置。如果图片B要与图片A并排，那就可以用相对定位。那么，不管浏览器是全屏的，还是其它大小的窗口，只要它能显示图片A和图片B，那么两个图始终是并排显示的。固定定位就是即使浏览器窗口已经无法显示图片A和图片B了，它们仍然是并排显示的，而不会像相对定位那样，会因浏览器窗口的变化，而变化显示效果。

纯个人理解，欢迎指教，勿喷

层模型有三种形式：

 （1）、绝对定位(position: absolute) 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; }

（2）、相对定位(position: relative) 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置空间保留不动。 参照定位的元素必须是相对定位元素的前辈元素，参照定位的元素必须加入position:relative;，定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 

（3）、固定定位(position: fixed) fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化（比如网页中常见的广告位），除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
你可以参考我写的一篇手记，里面有关于css布局的详细知识点。

望采纳！