Html 如何使在web应用程序上创建的div显示在父容器的左上角？

我有一个web应用程序，允许用户创建div矩形。现在的问题是，我希望创建的div始终位于其父容器的左上角，但我得到的是第一个div将位于该角，随后创建的div将显示在其下方。我相信这是因为我的CSS位置是相对。但我不能使用绝对位置，因为要使矩形可拖动，位置必须是相对的

我已经试过使用margin-top:0px和vertical-align:top，但是没有效果。有没有其他方法可以达到与position:absolute相同的效果

CSS:

 .box {
overflow: hidden;
margin: 0px;
top: 0px;
max-height: inherit;
max-width: inherit;
cursor: move;
vertical-align: top;
}
#boxContain{
position: absolute;
height: 100%;
width: 600px;
z-index: 900;
}

---

框应相互重叠，并位于父框的左上角，而不是一个框位于另一个框的左下角。

理想的解决方案是使用

位置，但如果不使用它，则是一种约束，一种解决方案是在
框
元素上设置一个等于元素高度的负
边距顶部
，在其包含的元素上设置一个等效的正
填充顶部

在下面的示例中，三个箱子相互叠置：


.box{
高度：50px；
利润上限：-50px；
}
.集装箱{
填充顶部：50px；
}

盒
盒
盒
如果我理解正确，听起来所有的
都在同一个父容器中结束。您能否调整代码，使每个
都有自己的容器？否则，它们不可能都在一个所需的位置结束。
如果我这样做，将有一个小错误。例如，如果我创建多个框，则只有顶部的一个框是可拖动的。但如果我创建一个，移动它，然后创建另一个，两者都是可拖动的。但这不是一个好的UI。。。