Как клонировать div поверх другого div jquery

Question

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

main. js

    var container = $("#pagecontainer");
    clone = container.clone()
    clone.attr('class', 'movingcontainer');
    var destination = container.offset();
    clone.css({top: destination.top, left:destination.left});
    clone.appendTo('#wholecontainer');

    clone.animate({
        right: '-100%'
    },
    {
        duration: 400,
        complete: function() {
        clone.remove()
    }},
    500, 
    function() {
        clone.css('right', '100%');
        clone.appendTo('#body');
    });

style. css

    .movingcontainer {
        position: absolute;
        background-color: #fff;
        width: 560px;
        height: 146px;
        display: flex;
        text-overflow: 0px;
        color: black;
        z-index: 10;
        border: none;
        margin: 0;
    }

    .movingcontainer .like, .movingcontainer .dislike {
        width: 50px;
        height: 100%;
        border: none;
        padding: none;
        margin:0;
    }

    .pagecontainer {
        display: flex;
        min-width: 70%;
        margin: 0;
        position: absolute;
        margin-top: 10%;


    }
    .wholecontainer {
        position: absolute;
        min-width: 70%;
        max-height: 210px;
        display: flex;
        flex-direction: column;
        margin-left: 25%;
        margin-right: auto;
        align-items: center;
    }   

index. html

<div class="wholecontainer" id="wholecontainer">
    <button class="createpost" type="button" name="createpost">
        <td>Create Post</td>
    </button>
    <div class="pagecontainer" id="pagecontainer">
        <script type="text/javascript">var token = '{{ csrf_token }}';</script>
        <button type="button" name="dislike" class="dislike" value="dislike?{{ post.id }}"  id="dislike" onclick="like(this)">
            <i class="fas fa-times fa-3x dislikex"></i>
        </button>
        <div class="postcontainer" id="postcontainer">
            <h1 class="posttitle" id="posttitle">{{ post.title }}</h1>
            <h1 class="postcontent" id="postcontent">{{ post.content }}</h1>
            <h3 class="postdate" id="postdate">{{ time_since }}</h3>
        </div>
        <button type="button" name="like" class="like" value="like?{{ post.id }}" id="like" onclick="like(this)">
            <i class="fas fa-check fa-2x likecheck"></i>
        </button>
    </div>
</div>

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

Answer 1

Ой, просто нужно добавить margin-top: 10% клонированному div.