我们可以将 top 值改得再大一点，比如 top:150px ，那么看到的效果是：
[attach]4242[/attach]
通过上面的比较，我们看到，相对偏移，实际上是元素相对于文档流中它原来的空间位置的偏移！像上面的例子里，经过改 top 后的位置移动，是相对于原来的空间位置，沿着 Y 轴向下移动的（当值为负数时，向上移动）。另外需要注意的是，它原来的空间位仍然保留着一片空白。
除了相对定位，还有绝对定位，下面来看看绝对定位是怎么说的。
要用绝对定位时， position 的值要改为 absolute ，此时效果变为：
[attach]4243[/attach]
当改为绝对定位时，对应这个 div 元素已经完全从文档流中剥离出来，而不再按照原先的代码书写顺序来展示 。这个就如同，当你上体育课时，体育委员是可以单独站出来的，而不是和其他同学一块排队的。
然而，不管是相对定位还是绝对定位，参照物必须有，那么绝对定位的参照物是什么呢？ 在这里的情况是，参照的是 body 体来定位，这个可以通过修改 left, top 等值观察到。但实际应用中一般是不会参照 body 体（整个屏幕）来定位的，这是因为当使用不同的显示器，不同的分辨率时，这样的位置都会发生变化，所以不能这么做。那么这个问题该怎么办？
上面所演示的绝对定位，之所以参照 body 体，那是因为它在它的旁边，或者更远的地方没有找到一个“父” div 作为参照物。下面修改代码，看另一种情况：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
显示效果：
[attach]4244[/attach]
在上面代码中，forum 这个 div 被包含在 pa 这个 div 中，pa 是 forum 的父元素，且 pa 的 position 被设置为 relative。这样，forum 这个浅绿背景的小方块就有了参照物，尽管它是 absolute 的，但它会跟着 pa 的位置改变而改变（可以通过改变 pa 的 top 值来观察）。
有了这个技巧后，由于不再被强制以 body 体作为偏移的参照物，此时具有 absolute 属性的元素就可以在页面中任意走动了，以后再配合 js 脚本，那么就可以制作出任何的效果。