如何根據x-y座標和寬度高度安排多個html元素？

Question

我正在開發HTML5中的數字標牌應用程序，其中我將有一個屏幕將播放/顯示用戶設置的各種媒體。我有多個元素，如視頻，圖像，小工具，股票代碼等。我有元素的x-y軸和它們的高度/寬度，我想根據給出的信息精確地排列它們。我將在xml/json中獲取數據。

我嘗試過使用純CSS，但它不按預期方式工作。我嘗試過SVG和Canvas，但他們不支持所有的html元素。

Answer 1

您可以使用absolute從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; 
} 

然後你可以使用它像

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