调整文本区域大小时，所有元素都向下移动：如何修复

Question

问题陈述

每当我在我的 Angular 网站中调整文本区域大小时，所有元素都会向下移动，这是我不想要的。

技术警告

我希望用户能够自行调整文本区域的大小。它必须是网站功能的一部分。

代码

HTML 用于文本区域

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

CSS 用于文本区域

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

问题图片

当用户未调整文本区域大小时：

当文本区域被用户调整大小时：

图片说明

如您所见，每当用户调整文本区域的大小时，它会将所有其他元素向下移动。

预期结果

我希望文本区域独立于所有其他元素调整大小并且不移动任何元素。

实际结果

每当调整大小时，文本区域都会向下移动所有元素。

Answer 1

使用：position: relative

在此处查看文档： https://developer.mozilla.org/en-US/docs/Web/CSS/position#Relative_positioning

fiddle : https://jsfiddle.net/Lgj3n65s/

Answer 2

问题不大。我需要做的就是将 position: relative 更改为 position: absolute。这是我在发布问题之前没有注意到的一个小细节。

谢谢大家！

Answer 3

在 XPContain 中添加 vertical-align: top class

调整文本区域大小时，所有元素都向下移动：如何修复

When resizing textarea, all elements move down: How to fix

html

css

textarea

angular-material

angular