Why does offsetParent ignore my article tag?

Question

I want to obtain the X and Y co-ordinates of my canvas, for which I am using the solution suggested in this question . For easy reference, here is the function I am using (included is a little debug alert message):

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

However, I am not getting the results I expect. Now, I have tracked my problem down to the getCumulativeOffset function not picking up the article tag in my HTML. Here the relevant 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>

The relevant 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
}

For some reason, when I test the function, it seems the article tag is not the offsetParent of the canvas as I would expect. Here is the output:

obj id = CANVAS (pizza)
bj id = BODY ()

Can anyone please explain this?

Answer 1

The element referred by offsetParent is the closest positioned ancestor element, if not found any, there are some rules for which element is returned ( offsetParent at MDN). Setting position: relative for the <article> should do the trick in your case.

Why does offsetParent ignore my article tag?

Question

1 answers

solution1
1 ACCPTED 2012-12-25 15:45:14

Why does offsetParent ignore my article tag?

Question

1 answers

solution1 1 ACCPTED 2012-12-25 15:45:14

solution1
1 ACCPTED 2012-12-25 15:45:14