I have created a messenger app working but there is one problem that the textbox overlaps the messages. **My HTML:**

```
<div>
  <ul id="messages"></ul>
  </div>
  <form onsubmit="return sendMessage();">
  <br>
  <br>
  <br>
  <div>
  <textarea id="message" placeholder="Enter message..." rows="3" cols="195"></textarea>
  <input type="submit" id="submitibtn">
  </div>
  </form>

```

**CSS:**

```
#message {
     resize: none;
     position: fixed;
     bottom: 0;
     height: 70px;
 }

 #message:hover {
     border: 2px solid black;
 }

 #submitibtn {
     background-color: cornflowerblue;
     width: 1580px;
     height: 30px;
     position: fixed;
     bottom: 0;
 }

 #submitibtn:hover {
     border: 2px solid blue;
 }

```

[Website](https://messengerwebapp.firebaseapp.com/) if you want to see it for yourself:
<https://messengerwebapp.firebaseapp.com/>
(Login as anonymous and send a message then see the textarea overlapping the messages)