需要Div定位计算说明

Question

我已附上下面的截图来解释我想要做的事情。

黄色突出显示的行是运行以获取div位置的脚本（图片中的红色框）。

我已使用此代码计算位置。

function getPosition(element) {
            var xPosition = 0;
            var yPosition = 0;
            var left = 0;
            var top = 0;
            var i = 0;
            while (element) {
                xPosition = (element.offsetLeft);
                yPosition = (element.offsetTop);
                console.log("TOP Pos: "+yPosition+"Left Pos: "+xPosition);
                if (i == 1) {
                    left = xPosition;
                    top = yPosition;
               }
                element = element.offsetParent;
                i++;
            }
            return {
                x: left,
                y: top
            };
        }

这里我使用了这种方法

function ReadDivPos(selector) {
            var _divPos = "";
            var parentDoc = window;
            while (parentDoc !== parentDoc.parent) {
                parentDoc = parentDoc.parent;
            }
            parentDoc = parentDoc.document;
            var parentDiv = parentDoc.getElementsByTagName('div');
            var divs = [];
            for (var i = 0; i < parentDiv.length; i++) {
                if (parentDiv[i].className == "content") {
                    var pos = getPosition(parentDiv[i]);
                    var x = pos["x"];
                    var y = pos["y"];
                    console.log("Values+ Top: " + y + " Left: " + x);
                    var w = parentDiv[i].offsetWidth;
                    _divPos += x + "," + w + "," + y + "," + (x + w) + ","+window.screen.availWidth+"\\n";
                }
            }
            console.log("Values+ x: " + _divPos);
            return _divPos;
        }

有趣的是，我得到了三个值，在第二次尝试时，我得到了正确的值。以下是显示所有三个值的屏幕截图。

正确的值是

 TOP Pos: 185Left Pos: 197

我在第二次尝试中得到了它。任何人都可以解释为什么我没有在第一次尝试中得到正确的值或有任何有效的方法来获得这些值。我必须获取父节点，因为这是访问div class ='content'的唯一方法，因为脚本放在div内容之前，所以我必须读取父节点，然后我才能访问所需的div。 / p>

请注意，这是我原始问题的副本（Div Positioning is calculated fine but need explanation how it is working）。那家伙让我接受他的回答，然后他会告诉他们是如何完成的，但是一旦我接受了他的答案，他就再也没有回到我身边，不幸的是我也忘记了我的用户名，所以我能够登录我的orignal帐户。

如果有人解释我为什么在第二次尝试中给我正确的位置。如果我理解这个概念，那么我是新的前端开发，那么它将有助于我未来的项目。提前致谢