Jak rozmieścić wiele elementów html na podstawie współrzędnych x-y i szerokości-wysokości?

Question

Pracuję nad aplikacją digital signage w HTML5, w której będę miał ekran, który będzie odtwarzał/wyświetlał różne media według użytkownika. Mam wiele elementów, takich jak wideo, obrazy, widżety, ticker itp. Mam oś x-y elementów i ich wysokość/szerokość, chcę je ułożyć dokładnie na podstawie podanych informacji. Otrzymam dane w xml/json.

Próbowałem z prostym CSS, ale nie działa zgodnie z oczekiwaniami. Próbowałem SVG i Canvas, ale nie obsługują one wszystkich elementów HTML.

Answer 1

można po prostu elementy pozycję za pomocą absolute z 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; 
} 

Wtedy można go używać jak

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