相对定位中的margin根据什么定位？

对于《寻找圣杯布局》这篇文章，里面有一点把我搞得很糊涂，那就是原文第三步把左列拖回恰当的位子那里开始，给左列设置margin-left：-100%后（还未设置right）右列的位子在各浏览器的位置是不同的，原文给出的图中右列是向左移然后占据了原本左列的位子，如图：

而我在Chrome、FF、IE9下看了一下，右列的位置都是不同的：

以上三种浏览器中右列位置的不同，我首先想知道的是对于一个相对定位的元素来说，给它设置了margin后它是否还在文档流中？它在原来的位置还占不占空间？

根据以上三个图，我感觉在Chrome中左列是没有脱离文档流中，它的最初所占据的空间还一直在那里，因为右列的位置没有变化，只不过左列看起来移位了（后面会接着在Chrome中给左列设置right：200px，右列的位置也依然没变可以证明这一点）。

在FF中设置了margin-left的左列应该是脱离了文档流，因为此时右列占据了原本左列的位置，而且左列被右列重叠了一部分，所以此时左列也应该不占据空间了。

在IE9中右列向左移动了但是还被左列往下顶了一部分，看上去左列原本占据的空间已经不在了，但是它还没有脱离文档流，因为它还会影响右列（即它还会影响它的兄弟）。但这里矛盾的感觉很浓重，于是我又去删减了左列的一部分内容，让它变矮一点来看，结果是这样的：

到这里的时候我就已经乱的一塌糊涂了，我不清楚到底是怎么回事。更乱的还在后面呢。

给左列再加上right：-200px后，原文中第四步是将右列拉到恰当的位子：他是用了 margin-right: -150px。此时的右列整个的宽度是150px，那假如我给margin-right设置的是-149px或者负更小的数值呢，然后我发现设置的margin-right的负值的相反数比右列宽度小时右列都不会移动，在三种浏览器都是这样。然后我又去给margin-right设置了-150px、-151px、-300px、-100%···结果发现只要这个负值小于等于负的右列宽度效果都是一样，右列都是刚刚好占据了容器的右padding。这里我彻底晕了，这个margin-right到底是相对于什么来定的？

纠结了一晚上也没想出个所以然，哪位能帮我解决·····不甚感激！