当 textarea 动态伸缩时，使用 `position: relative` 硬编码偏移会导致兄弟按钮脱离文档流、无法同步移动；正确方案是通过语义化容器 + css flex 布局重构视觉顺序，使按钮成为同一布局上下文中的可响应元素。
在 Web 表单开发中，常遇到这样一种典型场景：两个按钮分别位于不同 <form> 标签内（如“Approve”在上方表单、“Reject”在下方表单），而 <textarea> 位于后者内部且支持自动高度增长（例如配合 rows 属性或 JS 动态调整）。此时若对上方按钮使用 position: relative 配合 top/left 进行手动定位，它将脱离正常文档流——当 <textarea> 因内容增加而撑高时，下方按钮会自然下移，但上方按钮却“钉死”在原位置，最终发生重叠或错位。
根本原因在于：position: relative 仅改变自身定位参考点，不改变元素在文档流中的占位，更无法建立与其他元素的动态关联。要实现“一个动、另一个跟着动”，必须让它们处于同一个布局上下文（containing block） 中，并共享同一套排布逻辑。
✅ 推荐解法：用语义化容器包裹所有相关元素，采用现代 CSS Flex 布局控制顺序与对齐：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
<div class="form-wrapper">
<form name="form0">
<table>
<tr>
<td valign="top">
<input type="submit" id="ApprBtn" class="ui-button ui-corner-all ui-widget" value="Approve">
</td>
</tr>
</table>
</form>
<form name="form1">
<table>
<tr>
<td>
<textarea class="textareaW" name="Reason" id="Reason" cols="100" rows="5" wrap="virtual"></textarea>
</td>
</tr>
<tr>
<td valign="top">
<input type="submit" id="RejectBtn" class="ui-button ui-corner-all ui-widget" value="Reject">
</td>
</tr>
</table>
</form>
</div>对应 CSS 如下（关键点已注释）：
.form-wrapper {
position: relative; /* 创建新的定位上下文 */
display: flex;
flex-direction: column; /* 垂直堆叠子元素 */
gap: 12px; /* 可选：统一间距，替代冗余 margin */
}
/* 移除表格默认布局干扰，让内容“透出”到父 Flex 容器 */
.form-wrapper form,
.form-wrapper table,
.form-wrapper tbody,
.form-wrapper tr,
.form-wrapper td {
display: contents; /* 关键！使表单/表格结构不参与布局，仅保留子元素 */
}
/* 按钮统一为块级、自适应宽度、垂直居中对齐 */
.form-wrapper input[type="submit"] {
display: block;
width: fit-content;
margin: 0 auto; /* 水平居中 */
}
/* 调整 Approve 按钮视觉顺序：让它显示在 Reject 按钮之后（即紧邻 textarea 下方） */
#ApprBtn {
order: 3; /* 默认 order: 0；RejectBtn 在 DOM 中靠后，order 默认更高，也可显式设为 2 */
}? 注意事项与进阶建议：
- display: contents 是本方案核心：它让 <form>、<table> 等容器“隐形”，其子元素（如 <input>、<textarea>）直接成为 .form-wrapper 的 Flex 项目，从而真正纳入同一布局体系；
- 若需兼容较老浏览器（如 IE），可改用 float 或绝对定位 + JS 监听 textarea 尺寸变化（不推荐，维护成本高）；
- <textarea> 的 rows 属性本身不会触发重排，但若使用 JavaScript 实现自动扩容（如监听 input 事件并设置 scrollHeight），Flex 布局会自动响应高度变化，无需额外干预；
- 为增强可访问性，建议为按钮添加 aria-label，并确保 <textarea> 有明确的 <label> 关联。
通过该方案，无论 <textarea> 如何伸缩，“Approve”与“Reject”按钮都将始终保持相对位置稳定，且整体结构语义清晰、响应式友好、易于维护。
