如何根据xy坐标和width-height排列多个html元素？

Question

I am developing a digital signage application in HTML5 in which I will have a screen which will be playing/showing various medias setup by user. I have multiple elements like video, images, widgets, ticker etc. I have xy axis of elements and their height/width, I want to arrange them precisely based on the information given. I will get data in either xml/json.

I have tried with plain CSS, but it not working as expected. I tried SVG and Canvas, but they do not support all the html elemnts.

Answer 1

You can simply position elements using absolute from Javascript:

function absElement(type, x, y, w, h) {
    let d = document.createElement(type);
    d.style.position = "absolute";
    d.style.left = x + "px";
    d.style.top = y + "px";
    d.style.width = w + "px";
    d.style.height = h + "px";
    document.body.appendChild(d);
    return d;
}

Then you can use it like

absElement("img", 100, 200, 400, 200).src = "myimage.jpg";