JavaScript 图像覆盖 Web 应用程序

Question

我正在开发一个 HTML/CSS/JavaScript 应用程序，并且我有一个功能，用户可以单击多个图像选项（不同大小），然后单击“开始！”应用程序将使用 JavaScript 将图像叠加在一起（按照顺序，使最大的图像在底部，依此类推）。我环顾四周，我看到的大多数网站都建议使用 CSS position:absolute，但我想知道是否有另一种方法可以使用 JavaScript 来做到这一点，所以它更具交互性。

有什么建议吗？我是 JavaScript 的初学者，很抱歉问了一个初级问题。

Answer 1

您可以使用 JavaScript 来操纵图像的位置。为每个图像分配一个 id 并使用 JavaScript getElementById 更改位置。

比如：

<div id="image1"><img src="image1.png" /></div>

然后是你的 JavaScript：

document.getElementById("image1").style.position = "absolute";
document.getElementById("image1").style.left = "0px";
document.getElementById("image1").style.top = "30px";

您可以对多个图像执行此操作，只需为每个图像 div 分配一个唯一的 id。