如何使在Web应用程序上创建的div出现在父容器的左上角？

Question

我的 Web 应用程序允许用户创建矩形，现在 divs.The 问题是我希望创建的 div 始终位于其父容器的左上角，但是我得到的是第一个 div 将在拐角处，随后创建的 divs 将出现在 it.I 下方，相信这是因为我的 CSS 位置是相对。但我不能使用绝对位置，因为位置必须是相对的才能使矩形可拖动。

我已经尝试过使用 margin-top:0px 和 vertical-align:top 但它没有 work.Is 另一种方法可以达到与 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;
}

盒子应该相互重叠并位于父级的左上角，而不是一个在另一个下面。

Answer 1

理想的解决方案是使用 position，但如果不使用它是一种约束，一种解决方案是在 .box 元素上设置负值 margin-top等于元素的高度，在其包含元素上具有等效的正 padding-top。

在下面的例子中，三个盒子都叠在一起：

.box {
  height: 50px;
  margin-top: -50px;
}

.container {
  padding-top: 50px;
}

<div class="container">
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
</div>

Answer 2

如果我没理解错的话，听起来所有 <div> 都在同一个父容器中。你能调整你的代码，让每个 <div> 都有自己的容器吗？否则，他们不可能都在一个想要的地方。

如何使在Web应用程序上创建的div出现在父容器的左上角？

How to make a div that was created on the web application appear at the top left corner of parent container?

html

css

css-position