Javascript 在有焦点时展开textarea（并将其置于前面）

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

这是我目前正在使用的代码（）：

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"/>

first:



第二：

试试这个插件。应该快速简单：

尝试设置样式“位置：绝对；”在第一个文本区域（txt1）上，这应该可以起作用。

在

文本区域上设置
位置
。您还可以去掉
z索引

添加
z-index
如果元素的
位置不是静态的，则不会执行任何操作。就我个人而言，我会添加一个包含所有css更改的类，并包括一个覆盖，如（）所示：

CSS

剧本

$(document).ready(function () {
    $('#txt1').focus(function () {
        $('<div class="overlay"/>').appendTo('body');
        $(this).addClass('focused');
        $('#txt2').val('focus');
    });
    $('#txt1').blur(function () {
        $(this).removeClass('focused');
        $('.overlay').remove();
        $('#txt2').val('blur');
    });
});

$（文档）.ready（函数（）{
$（'#txt1'）。焦点（函数（）{
$（''）。附于（'正文'）；
$（this.addClass（'focused'）；
$（'#txt2'）.val（'focus'）；
});
$（'#txt1'）.blur（函数（）{
$（this.removeClass（'focused'）；
$（'.overlay'）.remove（）；
$（'#txt2'）.val（'blur'）；
});
});
使用
输入
和
文本区
，大部分是
css
，还有一点
jquery
用于定位

哪个CSS应用于文本区域和周围元素？这与定位有关。没有CSS（请单击链接查看正在运行的示例），您是否愿意使用插件？有一些非常好的公司可以处理所有这些。看看这个：@pixelboy:它支持垂直扩展文本区域而不是水平扩展吗？嘿@M4N，是的，那一个看起来是水平的，但我在下面贴的那一个是垂直的。几乎！不幸的是，这会使位于文本区域右侧的内容消失。这是一个很好的解决方案，尽管在我的例子中覆盖会分散注意力。这很好：P，但我仍然会添加具有高度的类，因为当
#txt1
模糊时，它的
自动
高度比最初的高度高（至少在Firefox中是这样）。要么如此，要么将原始高度另存为一个数字。@eykanal:我的猜测是，由于
z-index
仅适用于定位元素，缺少位置意味着元素按其在页面上的显示顺序进行z-index。将
position:relative
添加到一个元素会使其高于
static
元素的其余部分ents，这就是为什么添加了
position:relative
后可以删除
z-index
的原因。@M4N:啊，我很高兴在它持续的过程中成为公认的答案：D@Town：也许我会再次接受它…稍后…请稍候；-）@M4N：请接受，我提议标记同义词的特权取决于此！；）
.focused {
    position: relative;
    height: 90px !important;
    z-index: 1000;
}
.overlay {
    display: block;
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    background: #000;
    opacity: .75;
    filter: alpha(opacity=75);
    z-index: 999;
}

$(document).ready(function () {
    $('#txt1').focus(function () {
        $('<div class="overlay"/>').appendTo('body');
        $(this).addClass('focused');
        $('#txt2').val('focus');
    });
    $('#txt1').blur(function () {
        $(this).removeClass('focused');
        $('.overlay').remove();
        $('#txt2').val('blur');
    });
});