При изменении размера textarea все элементы перемещаются вниз: как исправить

Question

Постановка проблемы

Всякий раз, когда я изменяю размер текстовой области на моем Angular сайте, все элементы перемещаются вниз, чего я не хочу.

---

Техническое предупреждение

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

---

Код

HTML для Textarea

<mat-form-field class="XPContain" appearance="outline">
    <textarea matInput cols="30" rows="10" placeholder="Describe your past experience"></textarea>
</mat-form-field>

CSS для Textarea

.XPContain {
  position: relative;
  left: 400px;
}

---

Изображения проблемы

Когда текстовая область не изменена пользователем:

Когда текстовая область изменена пользователем:

---

Объяснение изображений

Как вы можете видеть, всякий раз, когда пользователь изменяет размер текстовой области , он перемещает все остальные элементы вниз.

---

Ожидаемые результаты

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

---

Фактические результаты

Текстовое поле перемещает все элементы вниз при изменении их размера.

Answer 1

Проблема была маленькой. Все, что мне нужно было сделать, это изменить position: relative на position: absolute. Это была незначительная деталь, которую я не заметил до публикации своего вопроса.

Спасибо всем!

Answer 2

Добавить по вертикали: top in XPContain class

Answer 3

использование: position: relative

оформить заказ c здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning

скрипка: https://jsfiddle.net/Lgj3n65s/