JavaScript拖放问题

好的，我已经创建了一个JavaScript页面，用户可以在其中添加文本，他们可以设置颜色、粗体斜体以及大小和字体。通过下拉框选择大小和下拉选项

它看起来有点凌乱，因为我不担心外观，只担心功能

当他们添加一个出现在小部件中的元素时，他们可以将该元素拖到我创建的显示在屏幕上的图像上。每当用户对文本的位置感到满意时，他们都会单击“保存”，这将生成坐标并更新“表格X和Y坐标”字段。此时，将生成一个新行，他们可以重复添加新元素的过程。只要他们高兴，他们就会单击save，并将其发送到数据库中存储，以便以后检索

我的问题是，每次我添加一个新的文本字段，它都会将元素向下推一定量

我通过添加一个递减变量来纠正这个问题，该变量采用elementCount（每次添加一个新的label元素时自动递增）并将其乘以一个设定值以递减

decr -= (elementCount* 16);

这对于中等大小的文本很好，但是当您开始添加不同的文本大小和字体组合时，它会改变元素被压下的程度，因此每添加一个其他元素，它就会变得越来越差

新元素是这样添加的

        elementCount++;

      var Text = textArray[textArray.length-1];
       var Font = fontArray[fontArray.length-1];
       var Color = colorArray[colorArray.length-1];
        var Bold = boldArray[boldArray.length-1];
        var Size = sizeArray[sizeArray.length-1];
        var Italics = italicsArray[italicsArray.length-1];
        var X = xCordArray[xCordArray.length-1];
        var Y = yCordArray[yCordArray.length-1];

         var newdiv = document.createElement('div');
     newdiv.innerHTML = "<span><font color='" + Color + "' size = '" + Size + "' face='" + Font + "'><label class = 'drag2' id = 'text" + firstCount + "'> " + Text + "</label></font></span>";
    document.getElementById(divName).appendChild(newdiv);


        var decr= 32;
        decr-= (elementCount* 16);
        Y = parseInt(Y) + test;
        X = parseInt(X) + 24;


           document.getElementById("text" + elementCount).style.left = X + "px";
           document.getElementById("text" + elementCount).style.top = Y + "px";

---

我改为绝对定位，把它放在一个相对定位的容器中，现在可以完美地工作了

新的

div

是否有一些默认CSS，如

位置：绝对；排名：0；左：0？如果需要，还可以使用唯一的
z索引。如果它不是绝对定位的，它将遵循DOM的正常流程，其位置将受到其他元素的影响，反之亦然。有关css元素的示例，请参见我的编辑。我用的是relative，所以我想这可能是个坏主意。将尝试绝对，看看这是否有区别
   .text1{
position: relative;
left: 0px;
top: 0px;

}