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

Posted 2023-05-07

【中文标题】调整textarea大小时，所有元素都向下移动：如何修复

【英文标题】：When resizing textarea, all elements move down: How to fix

【发布时间】：2020-06-17 02:55:32

【问题描述】：

问题陈述

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

---

技术警告

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

---

代码

文本区域的 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;

---

问题图片

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

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

---

图片说明

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

---

预期结果

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

---

实际结果

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

【问题讨论】：

您能提供一个工作示例吗？ mat-form-field 的默认行为似乎不是这样的：stackblitz.com/edit/angular-lyyb45

【参考方案1】：

使用：position: relative

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

小提琴：https://jsfiddle.net/Lgj3n65s/

【讨论】：

请提供工作演示以了解问题

啊哈，我确实找到了问题所在。我要回答我自己的问题。这当然是小事！

【参考方案2】：

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

谢谢大家！

【参考方案3】：

在 XPContain 类中添加 vertical-align: top