你如何追加并让项目向上移动

Question

我需要了解为什么这不起作用？

查询：

var html = '<div id="messages2" class="messageDisplay">'+message+'</div>';

    $("#allMessages").append(html);

html：

<div id="messages" class="messagePersonBox shadow">

        <span class="usersname" name="receiver"> '.$Username.'</span>

<hr style="margin-top:22px">

<div id="allMessages" style="margin-top: 180px;"></div>

<input type="text" id="messagetosend" name="message" class="messagetype" placeholder="Type a message..."><span id="send" class="messageSend">↩</span>

</div>

这会附加项目，但项目不会向上移动。我希望它保持固定在底部，但我希望一切都向上移动。我不确定我的代码有什么问题。我认为这与我的 CSS 有关，但我不确定。

css

.messageBox {

    margin-left: -83.5%;

    top: -35px;

    position: relative;

}

.messagePersonBox{

   width: 14%;

   height: 37%;

   background-color: white;

   display: block;

   box-shadow: 5px 10px #888888;

   position: fixed;

   left: 74%;

   bottom: 0;

   border-radius: 25px;

}

.shadow {

   -moz-box-shadow:    inset 0 0 10px #000000;

   -webkit-box-shadow: inset 0 0 10px #000000;

   box-shadow:         inset 0 0 10px #000000;

}

.messageSend{

    margin-left: 12.9%;

    cursor: pointer;

    position: fixed;

    bottom: 15px;

}

.usersname {

    position: absolute;

    margin-left: 11%;

    margin-top: 1px;

}

.messageType{

    border-radius: 25px;

    padding: 7px 8px;

    bottom: 12px;

    position: fixed;

    margin-left: 41px;

}

.messageDisplay {

    position: relative;

    margin-left: 40%;

    top: 58%;

    margin-bottom: 10px;

    width: 132px;

    background-color: lightblue;

    border-radius: 25px;

    padding: 1px 14px;

}