前端 如何在图像上方动态生成div

可以通过CSS的position属性和z-index属性来实现在图像上方动态生成div。具体步骤如下：

1.在HTML中，将图像和div都放在一个容器中，并设置容器的position属性为relative。

2.在CSS中，将图像的position属性设置为relative或absolute，并设置z-index属性为1。

3.将要动态生成的div的position属性设置为absolute，并设置z-index属性为2。

4.使用JavaScript动态生成div，并设置其样式和位置。可以通过JavaScript操作div的style属性来设置其样式和位置。

例如，以下代码可以实现在图像上方动态生成一个红色的div：

HTML代码：

<div class="container">
  <img src="image.jpg" alt="Image">
  <div id="dynamic-div"></div>
</div>

CSS代码：

.container {
  position: relative;
}

img {
  position: relative;
  z-index: 1;
}

#dynamic-div {
  position: absolute;
  z-index: 2;
  background-color: red;
  width: 100px;
  height: 100px;
}

JavaScript代码：

var dynamicDiv = document.getElementById("dynamic-div");
dynamicDiv.style.top = "50px";
dynamicDiv.style.left = "50px";

这样，就可以在图像上方动态生成一个红色的div，并设置其位置为(50px,50px)。