为什么JavaScript中动态创建的div会叠加在已有div上方？

你遇到的叠加问题，核心原因是代码里car_div.style.top+=car_div.style.top;这行逻辑错误。初始car_div.style.top是字符串"20px"，相加后变成"20px20px"，这不是有效的CSS长度值，浏览器会忽略这个错误值，所以所有新创建的div默认top都是20px，自然会重叠在一起。

下面提供两种简单的修复方式：

方式一：跟踪当前位置，动态计算top值 #

在全局作用域定义一个变量记录当前的垂直位置，每次创建新div时，用这个值设置top，之后增加一个间距（比如div高度+10px留白）。

修改后的JavaScript代码：

// 全局变量，初始位置设为20px
let currentCarTop = 20;

function Addcar(){
    var car_name=$("#Car-name").val();
    var car_price=$("#Car-price").val();

    var car_div=document.createElement("div");

    car_div.style.position="absolute";
    car_div.style.width="320px";
    car_div.style.height="80px";
    car_div.style.left="300px";
    // 使用跟踪的位置设置top
    car_div.style.top = currentCarTop + "px";
    car_div.style.border="2px solid #d3d3d3";

    document.body.appendChild(car_div);             
    
    // 更新位置：div高度80px + 10px间距
    currentCarTop += 90;
}

方式二：用容器包裹，流式布局（更推荐） #

这种方式不需要计算top值，通过HTML结构自然排列元素，避免绝对定位带来的布局问题。

步骤1：在HTML里添加一个容器 #

在<body>里，#Car-adder-div后面加一个容器：

<div id="car-list-container" style="margin-left: 300px; margin-top: 20px;"></div>

步骤2：修改JavaScript代码 #

去掉绝对定位，让div作为块级元素自动排列：

function Addcar(){
    var car_name=$("#Car-name").val();
    var car_price=$("#Car-price").val();

    var car_div=document.createElement("div");

    // 去掉绝对定位，设置margin实现间距
    car_div.style.width="320px";
    car_div.style.height="80px";
    car_div.style.marginBottom="10px";
    car_div.style.border="2px solid #d3d3d3";

    // 把新div放到容器里，而不是直接加在body上
    document.getElementById("car-list-container").appendChild(car_div);             
}

这种方式更符合现代布局规范，后续维护也更简单。

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