Почему при добавлении новой записи, она не отступает вниз?

Question

[artchis]

Первая запись размещается нормально, а вторая ставится поверх первой, как это исправить?

HTML

{% for post in post %}
			<div class="box">
				<a href=""><div class="Title"><h3>{{ post.title }}</h3></div></a>
				<img class="photo" src="{{ post.link }}" alt="">
				<p class="content">{{ post.content }}</p>
			</div>
			{% endfor %}
			<style>
				.box{
					position: absolute;
					top: 300px;
					left: 600px;
					width: 700px;
					height: auto;
					background-color: #001;
					margin: auto;
				}
				.Title{
					position: absolute;
					top: 10px;
					left: 10px;
				}
				.content{
					position: absolute;
					top: 40px;
					left: 10px;
				}
				.photo{
					position: absolute;
					top: 100px;
					left: 10px;
					width: 600px;
					height: auto;
				}
			</style>

Comments

[Rsa97]

А куда оно должно размещаться, если у вас каждый div.box ставится абсолютно в одну и ту же позицию в родительском элементе?

[artchis]

Rsa97, А скажите пожалуйста, я в Front не очень. Что нужно сделать чтобы оно опускалось вниз?

[Rsa97]

artchis, Убрать позиционирование в .box

[artchis]

Rsa97, Если уберу позиционирование, то тогда он не по центру будет. И всё равно 2 записи на друг друге

[Rsa97]

artchis, А как вы хотите сделать два блока, и чтобы каждый был по центру, но не накладывался на другой?

[artchis]

Rsa97, Мне нужно что-бы каждая последующая запись шла в отступ примерно 50px, как это сделать? И все это по середине

[Rsa97]

artchis, Уберите position, top и left. Поставьте margin: 50px auto;

[artchis]

Rsa97,
Она просто в сторону уходит

[Rsa97]

artchis,

Answer 1

[WebEagle]

из .box нужно убрать position: absolute; или сделать position: relative;

И вообще absolute нужно обдуманно использовать, в вашем примере я бы вообще избавился