javascript - 为什么 createjs DOMElements 不能像所有其他对象一样正确定位在 Canvas 的左上角？

Question

(如题)

如果您创建一个 HTML 按钮并使用 createjs 将其放置在 Canvas 上:

var html = document.createElement('input');
html.type = 'button';
html.id = 'testing button';
html.value = 'test';
var DOMElement = new createjs.DOMElement(html);

var target = document.getElementById(<name of a div in your HTML>);

target.appendChild(html);

//returns the first canvas element seen in the page
var canvas = document.getElementsByTagName('canvas')[0];
var stage = new createjs.Stage(canvas);

createjs.Ticker.addEventListener("tick", function(event) {
    stage.update(event);
});

stage.addChild(DOMElement);
stage.update();

按钮将出现在 Canvas 的外部。这很可能是 HTML 和 CSS 的产物(我不知道为什么会这样)；而不是在舞台上的默认位置 (0, 0)，左上角，就像所有其他 createjs DisplayObjects 一样。

Answer 1

答案似乎与 CSS 样式有关。作为两个样式选项的简单添加，按钮的默认位置设置在我们预期的左上角 (0, 0):

var html = document.createElement('input');
html.type = 'button';
html.id = 'testing button';
html.value = 'test';
html.style.top = 0; // <--
html.style.left = 0; // <--

这些属性根据 MDN，确定相对于上边距和左边距的位置:

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top / left margin edge of the element and the top / left edge of its containing block.

来源:Top & Left .

如果有人可以就此行为的原因插话并提供更多细节，那就太好了，正如我所说，我只是没有 CSS 或 HTML 的背景来说明原因。