javascript - 在获得焦点时展开文本区域(并将其置于最前面)

Question

我想扩展一个文本区域(增加高度)，只要它有焦点。展开时，textarea 不应将内容向下移动，而应显示在其他内容之上。

这是我目前使用的代码 ( see here for an example ):

$(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

在 textarea 上设置 position 有效。您还可以去掉 z-index。

Working demo