テキストエリアのサイズ変更でテキストが覆われない

Question

ここで問題の絵が表示されます。テキストエリアのサイズを変更すると、他のテーブルテキストエレメントがテキストエリアをカバーします。テキストエリアのサイズを変更すると、そのテキストが隠されるので、自由にタイプすることができます。&テキストエリアのすべてを見てください。

EDIT：位置：絶対的なテキストをカバーし、今下の行のTextAreaオブジェクトは、（画像をリンクするためdownvoteしていない、stackoverflowのは私が画像を投稿させません 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>