在具有焦点的同时展开textarea(并将其置于前面)

Question

我想扩展textarea(增加高度),只要它有焦点.扩展时,textarea不应该向下移动内容,而应该显示在其他内容之上.

这是我到目前为止使用的代码(参见此处的示例):

$(document).ready(function () {
    $('#txt1').focus(function () {
        $(this).height(90).css('zIndex', 30000);
        $('#txt2').val('focus');
    });
    $('#txt1').blur(function () {
        $(this).css('height', 'auto');
    });
});

textarea的扩展工作正常,但我不能让它显示在页面上的其他元素之上(它显示在后面的元素后面).

是否有任何技巧可以显示所有其他元素之上/之前的扩展文本区域？

更新:这是用于重现问题的(最小)HTML代码:

<div style="height:20px;">first:<br/>
   <textarea id="txt1" rows="1" cols="20"
     style="width: 400px; height: 12px; font-size: 10px;">
   </textarea>
</div>
<br/>
second:
<br/>
<input type="text" id="txt2"/>

Answer 1

设置position的textarea作品.你也可以摆脱它z-index.

工作演示