Div 定位计算得很好，但需要解释它是如何工作的

Question

谁能解释一下这是如何工作的。我正在创建侧面板广告并放置我想要宽度位置的面板。当我在我的服务器上上传脚本时，我会得到一个小脚本，我们将其放置在发布者网站上，我们的脚本在 iframe 中运行。这是屏幕截图。

我的脚本以黄色突出显示，它正在获取 div 在红框中的位置 class='content'.

这是我用过的代码。

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
            };
        }

这就是我调用 getPosition 方法的方式

 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

Top:185 和 Left 197 这是正确的，但为什么我第一次得到 Top 2 和 Left 0，第二次得到正确的值。因为我在第二次尝试中获得了值，所以我已经使用 i==1

修复了这个问题

if (i == 1) {
     left = xPosition;
     top = yPosition;
 }

我认为这不是最好的方法，但这就是我获得正确值的方式。任何人都可以向我解释为什么它在第二次尝试时工作正常。提前致谢

有人给我解释一下吗？谢谢

Answer 1

我敢打赌，这是因为您正在搜索的元素（顺便说一句，getElementsByClassName 是一个东西）相对于包含它的元素定位，因此位置为 0,2 或什么-ev .

那个getPosition函数向上爬父树，所以父节点吐出正确的位置，因为它是相对于文档的。

最后，文档本身是相对于自身的，因此偏移量为零。

Div 定位计算得很好，但需要解释它是如何工作的

Div Positioning is calculated fine but need explanation how it is working

html

javascript

css

jquery