css - Chrome/Firefox のフローティング div によって Textarea のサイズ変更グラバーが非表示にならない

Question

テキストエリアのサイズ変更グラバーが、重複する div の背景を突っ込んでいるという問題があります。この div は、ポップアップ ダイアログのようなコンテンツを表示しようとしているため、絶対位置を使用してテキスト領域の上に配置します。ただし、その影響は、サイズ変更グラバーが div によって適切に遮られていないために台無しになります。

何か案は？

このjsfiddleは私のために問題を再現します:

http://jsfiddle.net/czerwin/bdWLw/1/

HTML:

HTML:

<div>
    <textarea>This is the text in the text area. For some reason, the resize grabber is not properly hidden by a div positioned over it.
     </textarea>
</div>
<div class="floater">Here is the overlay div. It should occlude a portion of the text area.
</div>


CSS:
.floater {
   position: absolute;
   left: 100px;
   top: 30px;
   background: white;
   border: 1px solid black;
}

これは、Mac 10.8.3 の Chrome 26.0.1410.43 で発生しています。Safariでも試してみましたが同じ結果でした。

Answer 1

代わりにこれを使用してください...textarea { resize: none; }