随着 p 标签的接近，向下移动元素

Question

这基本上是一个聊天布局，我希望按钮和输入元素在消息传递时自动向下移动。但是当我尝试这样做时，元素不会向下移动，它们只会留在原处。我希望输入和按钮标签随着消息的接近而向下移动。jQuery 接受了。var p = document.createElement('p');var message = document.querySelector('#messages');var button = document.querySelector('#typeb');button.addEventListener('click', function() {  p = document.createElement('p');  p.setAttribute('id', 'user');  var txt = document.createTextNode('This is a message sent.');  p.appendChild(txt);  message.appendChild(p);  reply();});function reply() {  p = document.createElement('p');  p.setAttribute('id', 'sent');  var txt = document.createTextNode('This is a message sent. jwejfhwewfwwef \n Hello Priyal');  p.appendChild(txt);  message.appendChild(p);}#box {  position: relative;  text-align: center;}#typer {  position: relative;  transform: translate(50%, 100vh);}#typeb {  position: relative;  transform: translate(160%, 100vh);}#user {  min-width: 150px;  min-height: 40px;  float: right;  display: block;  clear: both;  text-align: right;  background-color: aqua;  border: 1px solid aqua;  border-bottom-right-radius: 0px;  border-radius: 30px 0px 30px 30px;}#sent {  min-width: 150px;  min-height: 40px;  float: left;  display: block;  clear: both;  background-color: grey;  border: 1px solid grey;  border-bottom-left-radius: 0px;  border-radius: 0px 30px 30px 30px;}<div id="box">  <div id="messages">  </div>  <input type="text" id="typer">  <button id="typeb">Say it</button></div>

Answer 1

var p = document.createElement('p');

var message = document.querySelector('#messages');

var button = document.querySelector('#typeb');

button.addEventListener('click', function() {

  p = document.createElement('p');

  p.setAttribute('id', 'user');

  var txt = document.createTextNode('This is a message sent.');

  p.appendChild(txt);

  message.appendChild(p);

  reply();

});

function reply() {

  p = document.createElement('p');

  p.setAttribute('id', 'sent');

  var txt = document.createTextNode('This is a message sent. jwejfhwewfwwef \n Hello Priyal');

  p.appendChild(txt);

  message.appendChild(p);

}

#box {

  position: relative;

  text-align: center;

}

#typer {

  position: fixed;

   bottom:0;

}

#typeb {

  position: fixed;

  bottom:0;

}

#user {

  min-width: 150px;

  min-height: 40px;

  float: right;

  display: block;

  clear: both;

  text-align: right;

  background-color: aqua;

  border: 1px solid aqua;

  border-bottom-right-radius: 0px;

  border-radius: 30px 0px 30px 30px;

}

#sent {

  min-width: 150px;

  min-height: 40px;

  float: left;

  display: block;

  clear: both;

  background-color: grey;

  border: 1px solid grey;

  border-bottom-left-radius: 0px;

  border-radius: 0px 30px 30px 30px;

}

<div id="box">

  <div id="messages">

  </div>

  <input type="text" id="typer">

  <button id="typeb">Say it</button>

</div>