HTML开发中如何将button按钮定位在textarea（含第二个）的左上角

核心思路是为每组按钮+文本域套共用父容器，通过「父容器相对定位+按钮绝对定位」的方式实现效果，样式可复用，支持任意数量的文本域场景。

1. HTML结构示例 #

<!-- 第一组文本域+按钮 -->
<div class="textarea-wrapper">
  <button class="corner-btn">操作按钮</button>
  <textarea placeholder="请输入内容..."></textarea>
</div>

<!-- 第二组文本域+按钮 -->
<div class="textarea-wrapper">
  <button class="corner-btn">操作按钮</button>
  <textarea placeholder="请输入内容..."></textarea>
</div>

2. CSS样式实现 #

/* 父容器：开启相对定位，作为按钮定位的参照物 */
.textarea-wrapper {
  position: relative;
  width: 400px; /* 可根据业务需求调整宽度，也可设为fit-content自适应 */
  margin-bottom: 20px;
}

/* 左上角按钮：绝对定位固定位置，层级高于文本域 */
.corner-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  /* 以下为按钮自定义样式可按需修改 */
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  background: #409eff;
  color: #fff;
  cursor: pointer;
}

/* 文本域：设置顶部内边距避免输入内容被按钮遮挡 */
.textarea-wrapper textarea {
  width: 100%;
  height: 150px;
  padding: 40px 12px 12px; /* 顶部内边距需要大于按钮高度，可按需调整 */
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  resize: vertical;
}

方案说明 #

• 复用性强：新增文本域只需重复套用textarea-wrapper容器结构即可，不需要单独编写定位样式
• 兼容性好：基于基础的position定位实现，所有主流浏览器都支持无兼容问题
• 灵活性高：可以根据业务需求调整按钮偏移量、按钮样式，以及文本域的内边距适配不同尺寸的按钮

内容的提问来源于stack exchange，提问作者georgewoodall82