フォーカスがある間にテキストエリアを展開して前面に移動

Question

フォーカスがある限り、テキストエリアを拡張したい（高さを上げたい）。展開すると、テキストエリアはコンテンツを下に移動してはならず、代わりに他のコンテンツの上に表示する必要があります。

これは私がこれまでに（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'); 
    }); 
}); 

テキストエリアのエキスパンドが正常に動作しますが、私はそれがページ上の他の要素の上に表示することができません（これは後続の要素の後ろに表示されます）。

他のすべての要素の上/前に拡張テキスト領域を表示する方法はありますか？

更新：この問題を再現するために使用（minmal）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

Answer 2

は、このプラグインを試してみてください。素早くシンプルでなければなりません：http://unwrongest.com/projects/elastic/

Answer 3

スタイル 'position：absolute;'を設定してみてください。最初のテキストエリア（txt1）に、そのトリックを行う必要があります。

Answer 4

z-indexが静的​​以外positionを有する素子ずに何もしない追加。個人的に、私はCSSの変更のすべてを持つクラスを追加し、この（demo）のようなオーバーレイを含むであろう：

.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; 
} 

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'); 
    }); 
}); 

Answer 5

inputとtextareaとフィドルの作業、ほとんどcss少しのjqueryポジショニング

http://jsfiddle.net/Ap5Xc/