Warum sind createjs DOMelements nicht wie alle anderen Objekte oben links im Canvas korrekt positioniert?

Question

(Stand der Titel)

Wenn Sie eine HTML-Schaltfläche und legen Sie es auf der Leinwand mit CreateJS erstellen:

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(); 

Die Schaltfläche außerhalb der Leinwand erscheint. Dies ist wahrscheinlich ein Artefakt des HTML und CSS (ich habe nicht den Hintergrund, um zu sagen, warum das so ist); Statt an der Standardposition auf der Bühne (0, 0), oben links, wie alle anderen createjs DisplayObjects.

Answer 1

Die Antwort scheint mit dem CSS-Styling in Zusammenhang zu stehen. Als eine einfache Addition von zwei Styling-Optionen, um die Standardposition des Button oben links gesetzt hat (0, 0), da wir erwarten:

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

Diese Eigenschaften nach MDN, Position relativ zum oberen bestimmen und links Margins:

Für absolut Elemente positioniert (die mit der Position: absolute oder Position: fest), es Randkante des Elements und dem oberen/linken Rand des umschließenden den Abstand zwischen dem oben/links angibt Block.

Quelle: Top & Left.

Wenn jemand wegen dieses Verhaltens und ein wenig mehr Detail, das wäre toll, wie ich sagte, ich habe einfach nicht den Hintergrund in CSS oder HTML, warum zu sagen.