为什么offsetParent忽略我的文章标签

Why does offsetParent ignore my article tag?

本文关键字：文章 标签 我的 offsetParent 为什么      更新时间：2023-09-26

我想获得我的画布的X和Y坐标，为此我使用这个问题中建议的解决方案。为了方便参考，以下是我使用的函数(包括一个小调试警报消息):

function getCumulativeOffset(obj) {
    var left, top;
    left = top = 0;
    if (obj.offsetParent) {
        do {
            alert("obj id = " + obj.tagName + " (" + obj.id + ")");
            left += obj.offsetLeft;
            top  += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return {
        x : left,
        y : top
    };
};

然而，我没有得到我期望的结果。现在，我已经跟踪我的问题到getCumulativeOffset函数没有在我的HTML中拾取文章标记。这里是相关的HTML:

<body>
    <article>
        <canvas id="pizza" width="460" height="460">Your browser does not support the HTML5 canvas.</canvas>
    </article>
    <div id="temp"></div>
</body>

相关CSS:

article, aside, figure, footer, header, hgroup, nav, section {
    display:block
}
body {
    font: normal medium 'Gill Sans', 'Gill Sans MT', 'Goudy Bookletter 1911', 'Linux Libertine O', 'Liberation Serif', Candara, serif;
    padding: 0;
    margin: 0 auto;
    width: 40em;
    line-height: 1.75;
    word-spacing: 0.1em
}
article {
    text-align: center;
}
#pizza {
    display: inline-block
}

由于某种原因，当我测试函数时，似乎文章标签不是画布的offsetParent，因为我期望。下面是输出:

  • obj id = CANVAS (pizza)
  • bjid = BODY ()
谁能解释一下这个?

offsetParent引用的元素是最近的定位的祖先元素，如果没有找到，则有一些返回元素的规则(offsetParent at MDN)。

为<article>设置position: relative应该在您的情况下完成。
相关文章：