爲什麼offsetParent忽略我的文章標籤？

我想獲得我的帆布的X和Y座標，爲此我使用this question中建議的解決方案。爲了便於參考，這裏是我使用的功能（包括被一點點調試警報消息）：爲什麼offsetParent忽略我的文章標籤？

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 =帆布（比薩）
BJ ID = BODY（）

誰能請解釋一下嗎？

來源

2012-12-25 Stephan

通過offsetParent所指的元件是最接近定位祖先元素，如果沒有找到任何，存在用於被返回元件（offsetParent在MDN）的一些規則。設置position: relative爲<article>應該在你的情況下做到這一點。

來源

2012-12-25 15:45:14 Teemu

爲什麼offsetParent忽略我的文章標籤？

回答

相關問題