JavaScript图像覆盖Web应用程序

Question

我正在开发一个HTML / CSS / JavaScript应用程序，我有一个功能，用户点击几个图像选项（不同大小），当他们点击“Go！”应用程序将使用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。