кнопка "Показать еще" Как выровнять контент?

Вообщем ребята подскажите что я тут намудрил? Задача сделать кнопку показать еще рабочей.при нажатии добавляются еще карточки ниже. все сделал вроде добавляются но почему то на места старых карточек и кнопка не сдвигается ниже! я ее как то зафиксировал возможно и блок тоже но не могу понять как! гляньте плз.Если к этому причастны Position... то подскажите как можно по другому прижать объект к низу в случае кнопки?

$(function(){

$('.next1').on('click', function (){

const btn = $(this);
$.ajax({
url: 'data.html',
type: 'GET',
beforeSend: function(){
btn.attr('disabled',true);
},
  
  success: function(responce){
setTimeout(function(){
btn.attr('disabled',false);
$('.next1').before(responce)
}, 1000);

  },
  error: function(){
    alert('Error');
    btn.attr('disabled',false);
  }
});

});

});
@font-face {
    font-family: Geometria;
    src: url(../fonts/geometria.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Geometria;
    src: url(../fonts/geometria-bold.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }
    
body {
    height:100%;
    font-family: Geometria, serif;
    margin: 0;
    padding: 0;
}
header {
    background: url(../img/bg1.jpg) no-repeat center top/cover;

}
.cont {
    width: 930px;
    margin: 0 auto;
}
.menu {
    margin-top: 71px;
    float: left;
}
.menu1 {
    margin-left: 30px;
    margin-top: 80px;
    float: left;
}
.menu:hover {
    background: #DBDAD9;
}
.logo {

    float: left;
    margin-left: 170px;
    margin-top: 30px;
    height: 91px
}
.be {
    float: left;
    margin-top: 57px;
    margin-left: 13px;
}
header p {
    float: left;
    margin-top: 58px;
    margin-left: 30px;
    font-family: Geometria, serif;
    font-size: 16px;
    line-height: 26px;
}
.phone {
    float:right;
    font-size: 25px;
    margin-left: 20px;
    
}
.call {
    float: right;
    background: #EEF3FA;
    font-family: Geomeria, serif;
    padding: 16px 55px;
    border: 1px solid #2A94E2;
    box-sizing: border-box;
    border-radius: 5px;

}
button:hover {
    background: #2A94E2;

}
.head h1 {
    
width: 580px;
font-size: 40px;
line-height: 55px;
font-family: geometria-bold;
text-transform: uppercase;
color: #000000;
padding-top: 30px;
margin-top: 0px;
}
.head {
    width: 900px;
    display: flex;
    flex-wrap: wrap;
}

.par {
    
    padding: 0;
    margin-left: 0;
    margin-top: 10px;
    font-size: 22px;
    line-height: 36px;
    color: #000000;
}
.sp {
    border: solid;
    padding: 0;
    margin: 0;
    float: left;
}
.flex h2 {
    margin: 0;
    padding: 0;
     font-size: 80px;
     line-height: 131px;
     color: #2A94E2;
     
}
.flex p {

    width: 100px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
    color: #2A94E2;
    margin-right: 100px;
    margin-left: 20px;

}
.flex {
    width: 80%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
}
.glass {


}
.sham {
    margin: 0;
    padding: 0;
    float: none;
    margin-left: -380px;
    margin-top: 10px;
}
.vin {
    display: flex;
    justify-content: space-between;

}

.apart {
    margin-top: 20px;
    margin-bottom: 10px;
    background: #EEF3FA;
    font-family: Geomeria, serif;
    padding: 16px 90px;
    border: 1px solid #2A94E2;
    box-sizing: border-box;
    border-radius: 5px;
}

.double h2 {
    margin: 0 auto;
    font-family: Geometria,serif;
    font-size: 35px;
    line-height: 48px;
    text-align: center;
    margin-top: 60px;

}
.it {
       margin: 0 auto;
       font-family: Geometria;
       font-size: 20px;
       line-height: 36px;
       margin-top: 20px;

}
.double {
    margin: 0 auto;
     width: 930px;
}

.blok{
    display: flex;
    width: 900px;
    height: 350px;
    border: solid #F6F6F6;
    margin-bottom: 30px; 
    position: relative;
}
h4 {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    font-family: Geometria serif;
    font-size: 18px;
    line-height: 70px;
    margin-left: 30px;
}
.pic {
    display: flex;
    justify-content: space-between;
    width: 500px;
    margin-top: 30px;
}

.pic1 {
        width: 300px;
    height: 170px;
        margin-right: 20px;
}
.picblock {
    display: flex;
    justify-content: space-between;
    font-family: Geometria serif;
    font-size: 16px;
    line-height: 26px;
    align-items: center;
    text-align: center;
    margin-left: 90px;
    width: 75%;
   
}
.blockleft {
    height: 290px;
    margin: 0;
    width: 60%;
    margin: 0px 0px 70px 30px;
    border-bottom: 2px solid #F1F1F1;
}
.blockright {
    margin-left: 30px;
    display: flex;
    border-left: 2px solid #F1F1F1;

}
.like {
    
    margin: 40px 0px;
    align-items: flex-start;
    width: 30px;
}

.it2 {
    
        width: 200px;
    font-family: Geometria;
font-size: 12px;
line-height: 26px;
align-items: flex-end;
}


.side{
    margin: 0 0 0 20px;
    display: flex;
    flex-direction: column;
}

.answer {

    font-size: 12px;
    line-height: 26px;
    position: absolute;
    bottom: 0px;
    left: 50px;
}
.forw {
   display: flex;
    position: absolute;
    bottom: 17px;
    left: 400px;
}
.vector {
    width: 20px;
    height: 10px;
    margin: 10px 0 0 10px;
}
.next {
    font-size: 16px;
    line-height: 26px;
    color: #2A94E2;
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.next:hover {
      margin-top:-5px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.trouble {
    margin: 0 auto;
     width: 930px;
margin-bottom: 60px;
}
.trouble h3 {
    font-size: 20px;
line-height: 33px;
color: #FFFFFF;
position: absolute;
}

.trouble h2 {

font-size: 35px;
line-height: 48px;
text-align: center;
margin-top: 60px;
}

.foto {
    display: flex;
    flex-wrap: wrap;
height: 900px;
position: relative;
}
.f1 {
    background: url(../img/pic3.jpg) no-repeat center top/cover;
    width: 300px;
    height: 600px;
    margin-right: 10px;
    -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f2 {
    background: url(../img/pic4.jpg) no-repeat center top/cover;
    width: 300px;
    height: 300px;
    margin-right: 10px;
    position: relative;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.f3{
    background: url(../img/pic5.jpg) no-repeat center top/cover;
    width: 300px;
    height: 300px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.f4 {
    background: url(../img/pic6.jpg) no-repeat center top/cover;
    width: 609px;
    height: 290px;
    position: absolute;
    bottom: 300px;
    right: 10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.f5 {
    background: url(../img/pic7.jpg) no-repeat center top/cover;
    width: 600px;
    height: 290px;
    margin-right: 10px;
    margin-top: 10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.f6 {
    background: url(../img/pic8.jpg) no-repeat center top/cover;
    width: 305px;
    height: 290px;
    margin-right: 10px;
    margin-top: 10px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.cal {
        background: #EEF3FA;
    font-family: Geomeria, serif;
    padding: 16px 80px;
    border: 1px solid #2A94E2;
    box-sizing: border-box;
    border-radius: 5px;
    position: absolute;
    bottom: 320px;
    left: 25px;

}

.f1 h3 {
font-size: 22px;
line-height: 33px;
color: #FFFFFF;
position: absolute;
bottom: 450px;
    left: 25px;

}

.f1 p {
margin: 0 auto;
    color: #FFFFFF;
    width: 250px;
    font-size: 14px;
    position: absolute;
    bottom: 400px;
    left: 38px;
}


.f2 h3 {
    bottom: 0;
    left: 20px;
}
.f3 h3 {
        bottom: 600px;
    right: 20px;
}

.f4 h3 {
    bottom: 0;
    left: 20px;
}

.f5 h3 {
bottom: 0;
left: 20px;
}

.f6 h3 {
bottom: 0;
right: 130px;
}










.f1 h3:hover {
    color: #2A94E2;
}

.f2 h3:hover {
    color: #2A94E2;
}
.f3 h3:hover {
    color: #2A94E2;
}
.f4 h3:hover {
    color: #2A94E2;
}
.f5 h3:hover {
    color: #2A94E2;
}
.f6 h3:hover {
    color: #2A94E2;
}

.f1:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000; 
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f2:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000; 
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f3:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000; 
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f4:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000; 
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f5:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000; 
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.f6:hover {
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow:0 0 10px #000; 
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.four h2 {
    margin: 0 auto;
    font-size: 35px;
line-height: 48px;
text-align: center;
margin-top: 60px;
}
.four p {
    text-align: center;
    line-height: 48px;
    font-size: 20px;
}







-------------------------------

ul{border:0; margin:0; padding:0;
   text-align: center;
}

#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:16px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;


}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color: #FFFFFF;
background: #2A94E2;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
display:block;
float:left;
padding: 20px 28px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
background: #F6F6F6;
}


.catalog {
    position: relative;
    margin-top: 80px;
    height: 1000px;
    
}

.card img {
    width: 100%;
}
.card {
    position: relative;
    margin: 30px 40px 0 40px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: sans-serif;
  width: 400px;
    height: 400px;
}
.card:hover {
-moz-box-shadow: 0 0 10px #ffa329;
-webkit-box-shadow: 0 0 10px #ffa329;
box-shadow:0 0 10px #ffa329; 
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.card  h3 {
font-size: 18px;
font-family: Geometria,serif;
margin: 10px 0 0 15px;
float: left;
}

.card p{
    margin-left: 15px;
     margin-right: 20px;
    float: left;
    padding: 4px;
  font-size: 12px;
  
}

#price {
    position: absolute;
    left: 0;
    bottom: 80px;
    font-size: 20px;
    font-family: Geometria,serif;
    margin: 0 0 0 15px;
    padding: 0;
}
.lot {
    position: absolute;
    left: 0;
    margin: 0 0;
    bottom: 110px;
    color: #757575;
}


.plo {
    position: absolute;
    right: 0;
    bottom: 65px;
    color: #757575;
}
.floor {
    margin-right: 40px;
    position: absolute;
    right: 0;
    bottom: 65px;
}

.card button {
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: Geomeria, serif;
    padding: 10px 145px;
    box-sizing: border-box;
    border: none;
   

}
.pricemeter {
    position: absolute;
    left: 0;
    bottom:65px;
    color: #757575;
    margin-left: 15px;
}

.pos1 {
    position: absolute;
    right: 0;
    top: 0;
}

.pos {
    position: absolute;
    top: 0;
}


.pos2 {
    position: absolute;
    top: 440px;
}

.pos3 {
    position: absolute;
    right: 0;
    top: 440px;
}

.next1 {
    
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: Geomeria, serif;
    padding: 10px 388px;
    box-sizing: border-box;
    border: none;
    margin: 40px;


.catalog2 {
    position: relative;
    margin-top: 80px;
    height: 1000px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BLITZ ESTATE</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>
    <header>
         <div class="cont">
            <div>
                <img src="img/iconmenu.png" alt="" class="menu">
            <p class="menu1">Меню</p>
            <img src="img/logofull.png" alt="Blitz Estate" class="logo">
            <img src="img/be.png" alt="" class="be">
            <p>Продажа недвижимости <br>
            в Москва-Сити</p>
            <p class="phone">+7 (495) 199-19-99</p>
            <button class="call">Заказать звонок</button>
              </div>
              <div class="head">
                <h1>Агентство с международным именем Blitz Estate</h1>
                <p class="par">Поможем продать, купить и арендовать <br>
                недвижимость в Москве, районе Сити и области</p>
                <div class="flex">
                    <div class="conteiner">
                        <h2>17</h2>
                    </div>
                    <div class="conteiner">
                        <p>Работаем в 17 странах</p>
                    </div>
                    <div class="conteiner">
                        <h2>1963</h2>
                    </div>
                    <div class="conteiner">
                        <p>Помогли 1963-м клиентам</p>
                    </div>
                    <div class="conteiner">
                        <h2>10</h2>
                    </div>
                    <div class="conteiner">
                        <p>Лет на рынке недвижимости</p>
                    </div>
                
                </div>

                </div>
                <div class="vin">
                    <div class="cont">
                <img src="img/glass.png" class="glass">
              </div>
                <div class="cont">
                <p class="sham">Пройди тест и получи в подарок бутылку <br>
                    шампанского<strong> Veuve Clicquot</strong></p>
                </div>
                 </div>
                 <button class="apart">Подобрать недвижимость</button>
         </div>
    </header>
    <section class="double">
        <div class="cont">
            <h2>Пройдите тест из пяти вопросов</h2>
            <p class="it">Мы подберем 20 покупателей готовых купить вашу недвижимость в течении 24 часов</p>
         </div>
         <div class="blok">
         
         <p class="answer">Вы ответили на: 0/5 Вопросов</p>
         <div class="forw">
            <a  href="#" class="next">Продолжить</a>
            <img src="img/Vector.png" alt="" class="vector">
         </div>
         
         <div class="blockleft">
                <div>
            <h4>Выбирите местоположение объекта</h4>
         </div>
         <div class="pic">
                <img src="img/pic1.jpg" class="pic1">
                <img src="img/pic2.jpg" class="pic1">
            </div>
            <div class="picblock">
                <p class="text">В России</p>
                <p class="text">За границей</p>
            </div>
         </div>
         <div class="blockright">
            <div class="side">
            <img src="img/6.png" alt="" class="like">
            <img src="img/6.png" alt="" class="like">
            <img src="img/6.png" alt="" class="like">
            </div>
            <div class="side">
            <p class="it2">Поможем Вам приобрести, продать или арендовать необходимую недвижимость</p>
            <p class="it2">Продадим вашу недвижимость за 21 день или выкупим сами по стоимостьи в договоре</p>
            <p class="it2">Забронируем понравившуюся квартиру и зафиксируем стоимость для вас на момент бронирования</p>
         </div>
         </div>
         </div>
    </section>
    <section class="trouble">
        <div class="cont">
            
         </div>
         <h2>Наши услуги на международном рынке</h2>
         <div class="foto">
               <div class="f1">
                    <a href="#" ><h3>Жилая недвижимость</h3></a>
                    <p>Сопровождение сделок по продаже, купли и аренде объектов недвижимости под ключ.</p>
                    <button class="cal">Узнать больше</button>
               </div>
            <div class="f2">
                <a href="#"><h3>Доходная недвижимость</h3></a>
            </div>
            <div class="f3">
                <a href="#"><h3>Инвестиционные операции</h3></a>
            </div>
            
            <div class="f4">
                <a href="#"><h3>Покупка Яхт</h3></a>
            </div>

            <div class="f5">
                <a href="#"><h3>Доверительное управление</h3></a>
            </div>
            <div class="f6">
                <a href="#"><h3>Консьерж сервис</h3></a>
            </div>
         </div>
    </section>


    <section class="four">
         <div class="cont">
            <h2>Выбирите апартаменты в Москва-Сити</h2>
            <p>Мы включили в наш каталог все апартаменты доступные для покупки в Москва-Сити</p>

         <ul id="pagination-flickr">
        
         <li><a href="?page1">Показать все</a></li>
         <li><a href="?page=2">От 20-30 млн</a></li>
         <li><a href="?page=3">От 30-50 млн</a></li>
         <li><a href="?page=4">От 50-100 млн</a></li>
         <li><a href="?page=5">Более 100 млн</a></li>
         </ul>
            <div class="catalog"> 

               <div class="card pos">
  <img src="img/apart1.jpg" alt="apart1">
  <h3>Апартаменты в «башне ОКО»</h3>
  <p class="lot">Лот № 4536</p>
  <p id="price">25 600 000 ₽₽</p>
  <p class="plo">Площадь 70м²</p>
  <div class="floor">Этаж 52</div>
  <div class="pricemeter">365 714 ₽ за м²</div>

  <button>Назначить просмотр</button>
</div>

<div  class="card pos1">
  <img src="img/apart2.jpg" alt="apart1">
  <h3>Апартаменты в «башне Империя»</h3>
  <p class="lot">Лот № 4547</p>
  <p id="price">27 900 000 ₽</p>
  <p class="plo">Площадь 62м²</p>
  <div class="floor">Этаж 35</div>
  <div class="pricemeter">420 000 ₽ за м²</div>

  <button>Назначить просмотр</button>
</div>

<div  class="card pos2">
  <img src="img/apart3.jpg" alt="apart1">
  <h3>Апартаменты в «Neva Towers»</h3>
  <p class="lot">Лот № 4548</p>
  <p id="price">19 000 000 ₽</p>
  <p class="plo">Площадь 40м²</p>
  <div class="floor">Этаж 16</div>
  <div class="pricemeter">475 000 ₽ за м²</div>

  <button>Назначить просмотр</button>
</div>

<div  class="card pos3">
  <img src="img/apart4.jpg" alt="apart1">
  <h3>Апартаменты в комплексе «Федерация»</h3>
  <p class="lot">Лот № 4549</p>
  <p id="price">59 500 000 ₽</p>
  <p class="plo">Площадь 110м²</p>
  <div class="floor">Этаж 84</div>
  <div class="pricemeter">540 909 ₽ за м²</div>

  <button class=>Назначить просмотр</button>
</div>
<button class="next1">Показать еще</button>
</div>
   </div>



   </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <footer>
        <div class="cont">
            
         </div>
    </footer>
    
</body>
</html>


Ответы (0 шт):