Как сделать так, чтобы div, созданный в веб-приложении, отображался в верхнем левом углу родительского контейнера?

Question

У меня есть веб-приложение, которое позволяет пользователям создавать прямоугольники, представляющие собой 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;
}

Ящики должны перекрывать друг друга и располагаться в верхнем левом углу родительского элемента вместо того, чтобы располагаться один под другим.

Answer 1

Если я правильно вас понимаю, похоже, что все <div> находятся в одном родительском контейнере. Можете ли вы настроить свой код так, чтобы каждый <div> получал свой собственный контейнер? В противном случае все они не могут оказаться в одном желаемом месте.

Answer 2

Идеальным решением для этого было бы использовать position, но если не использовать его как ограничение, одним из решений было бы установить отрицательное значение margin-top для ваших .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>