我们先用一个默认嵌套的DIV来做示例
复制代码
<body style=”background: yellow;”>
<div style=”background: #fff”>
A
<div style=”background: #81b6ff”>
A – 1
<div style=”background: #b6ff00;”>
A – 2
</div>
</div>
</div>
</body>
现在我们对A-2这个div设置绝对定位(Top: 0, Left: 0)，而没有对它的父元素（A、A-1）设置任何的position值
复制代码
<body style=”background: yellow;”>
<div style=”background: #fff”>A
<div style=”background: #81b6ff”>A – 1
<div style=”background: #b6ff00; position: absolute; top: 0; left: 0;”>
A – 2</div></div></div></body>
可以看到（A-2）最终是根据body来产生了位移，让我们对比分别设置一下父元素position。
从上面的图，我们可以总结以下几个结论。
1）块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。
2）元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。
特殊情况：
Firefox的话会直接将top、left设置成offsetTop和offsetLeft的值而非auto。
IE7下的表现更类似于float，会附加到父元素的末尾。
一些的position小知识
1）应用了position: relative/absolute的元素，margin属性仍然有效，以position:relative来举例。如果设置了left、top、bottom、right的属性，建议大家不要设置margin数据，因为很难精确元素的定位，尽量减少干扰因素。
2）position: absolute忽略根元素的padding。
复制代码
<div id=”a” style=”background: #fff; width: 200px;”>A
<div id=”b” style=”background: #81b6ff; width: 150px; position: relative; padding-top: 100px;”>A – 1
<div id=”c” style=”background: #b6ff00; position: absolute; left: 0; top: 0″>A – 2
</div>
</div>
</div>
