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

Question

我有一个 Web 应用程序，它允许用户创建作为 div 的矩形。现在的问题是我希望创建的 div 始终位于其父容器的左上角，但我得到的是第一个 div 将是在拐 Angular 处，随后创建的 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;
}

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

Answer 1

理想的解决方案是使用 position，但如果不使用它是一种约束，一种解决方案是在您的.box 元素等于元素的高度，在其包含元素上具有等效的正 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>