EJS循环渲染内容与后续HTML元素重叠，需调整显示顺序

你的问题本质是CSS布局导致的容器高度塌陷或元素脱离文档流，EJS仅负责服务端生成HTML，渲染完成后和普通HTML无异，所以重点要调整样式：

常见原因及修复方案 #

1. 清除浮动（最常见诱因） #

如果.task-list-items或内部元素使用了float属性，会导致父容器.task-list/.added-task高度塌陷，后面的元素会往上填充空白区域，形成视觉重叠。

修复方法：给父容器添加清除浮动的样式

方法一：用伪元素清除（推荐，不增加额外DOM节点）

.added-task::after {
  content: "";
  display: table;
  clear: both;
}

方法二：给父容器设置overflow属性

.task-list {
  overflow: auto; /* 或 overflow: hidden */
  /* 保留你原有的其他样式 */
}

2. 检查定位属性 #

如果任务列表元素用了position: absolute或position: fixed，会脱离文档流，导致后续元素无视它的占位空间。

修复方法：

• 将绝对定位改为position: relative（如果需要相对定位效果）
• 若必须用绝对定位，给父容器设置position: relative，并调整子元素的定位偏移值，确保不会溢出父容器范围

3. 确保容器自适应内容高度 #

如果父容器未设置高度，且内部元素是浮动/绝对定位，容器高度会默认变为0，后续元素会直接和列表内容重叠。可以显式设置最小高度，或让容器自适应内容：

.added-task {
  min-height: 100px; /* 根据实际内容调整数值 */
}

额外规范优化（非重叠问题，但需注意） #

你的代码里每个复选框的id都是checkbox，HTML要求id必须唯一，建议修改为：

<input id="checkbox-<%= i.id %>" type="checkbox" name="id" value="<%= i.id %>">

内容的提问来源于stack exchange，提问作者Aman Tiwari