如何使用循环将多个画布元素定位在特定位置

<div class="canvas-container">
  <div class="canvas-element"></div>
  <div class="canvas-element"></div>
  <div class="canvas-element"></div>
  <!-- 添加更多的画布元素 -->
</div>

.canvas-container {
  position: relative;
  width: 500px; /* 可以根据实际需求调整画布容器的宽度 */
  height: 300px; /* 可以根据实际需求调整画布容器的高度 */
}

.canvas-element {
  position: absolute;
  width: 50px; /* 可以根据实际需求调整画布元素的宽度 */
  height: 50px; /* 可以根据实际需求调整画布元素的高度 */
  background-color: #000; /* 可以根据实际需求设置画布元素的样式 */
}

/* 设置每个画布元素的具体位置 */
.canvas-element:nth-child(1) {
  top: 50px; /* 可以根据实际需求调整画布元素的位置 */
  left: 100px; /* 可以根据实际需求调整画布元素的位置 */
}

.canvas-element:nth-child(2) {
  top: 150px; /* 可以根据实际需求调整画布元素的位置 */
  left: 200px; /* 可以根据实际需求调整画布元素的位置 */
}

.canvas-element:nth-child(3) {
  top: 100px; /* 可以根据实际需求调整画布元素的位置 */
  left: 300px; /* 可以根据实际需求调整画布元素的位置 */
}

/* 添加更多画布元素的具体位置设置 */