大家都知道，offset是元素的位置坐标，那位置坐标又和文档流有关系。如果position默认不设置的话，其值是static。static是个什么东东呢？下面我详细介绍一下：
比如：<div class="1"></div><div class="2"></div>
当1固定了位置。1的样式 float:left;100px; height:800px;
2的样式为 float:left; position：relative；margin-left:20px;50px;
2的位置在1的右边，距离120px.
语法:
position：static | relative | absolute | fixed取值:static ：默认值，无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用，默认值。
relative：相对定位，对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
absolute：绝对定位，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：固定定位，对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。四个属性的详细介绍：static，默认值
说到这里我们不得不提一下一个定义——文档流，很多书对文档流这个概念只是一笔带过，没有详细解答，但我根据自己的经验和理解对它进行了总结，文档流其实就是文档的输出顺序，也就是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。
默认值就是让元素继续按照文档流显示，不作出任何改变。relative，相对定位
位置属性被设置为relative之后，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。它可以随窗口大小变化。但大小仍然不会变。要是你设置成100%;height:100%;这样就会随着窗口变大变小。
比如：<div class="1"></div><div class="2"></div>
当1固定了位置。1的样式 float:left;100px; height:800px;
2的样式为 float:left; position：relative；margin-left:20px;50px;
2的位置在1的右边，距离120px.
absolute，绝对定位
位置被设置为absolute后，被设置的元素会被定义到包含它的元素内的指定坐标（X坐标、Y坐标）。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。它不会随着窗口大小变化，只是固定在一个特定的坐标轴上面；
固定位置，fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。但是目前它在IE6中不被支持，只有IE7和Firefox浏览器可以识别
position注意事项：
1、当Position属性值为Relative时对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时，只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时，只有left起作用。
2、当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。
2、当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。
大家注意，static默认是没有left,right,top,bottom值的。所以除了IE6、7以外，如果元素没有设置postion，那么取它的offset值，offsetParent就是body元素。但是在IE6、7下，对于那些破坏文档流的样式设置了之后，它的offsetParent就是这个hasLayout（由于设定了 'float' 特性导致 P.currentStyle.hasLayout = true）元素。
在 IE6 IE7 IE8(Q) 中，一个 'position' 特性值为 'static' 的元素的 offsetParent 可能会是其最近的、触发了 hasLayout 的父元素。
同时其 offsetTop、offsetLeft 的返回值参照元素也是距离其最近的触发了 hasLayout 的祖先级元素。
同时其 offsetTop、offsetLeft 的返回值参照元素也是距离其最近的触发了 hasLayout 的祖先级元素。
解决方案
可考虑对于为在 IE 中触发了 hasLayout 特性的元素设置 'position' 特性值为非 'static' 值，如 'relative'，或避免使用元素的 offsetTop、offsetLeft、offsetParent 属性。