调整textarea的大小不会覆盖文本

Question

这是问题的图片，当调整textarea的大小时，其他表格文本元素覆盖了textarea。我想要它，这样当你调整文本区域的大小时，它会隐藏文本背后的文本，这样你就可以自由输入＆amp;看看textarea中的所有内容。

编辑：位置：绝对覆盖文本，但现在较低行的textarea对象阻碍了 link （不要为了链接图片而投票，因为我的排名不够高，所以我不会发布图片，因为我的排名不够高）

Answer 1

我会使用position: absolute并将其包装在position: relative容器中。

table {width: 100%;}
td {width: 33%;}
.wrap {position: relative; height: 100px; z-index: 2;}
.wrap textarea {position: absolute; height: 95px; width: 95%; z-index: 2;}
.wrap textarea:focus {z-index: 99;}

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="wrap"><textarea name="" id="" cols="30" rows="10"></textarea></div>
      </td>
      <td>
        Hello World
      </td>
      <td>
        Hello World
      </td>
    </tr>
    <tr>
      <td>
        <div class="wrap"><textarea name="" id="" cols="30" rows="10"></textarea></div>
      </td>
      <td>
        Hello World
      </td>
      <td>
        Hello World
      </td>
    </tr>
  </tbody>
</table>