當它有焦點時，展開textarea（並將它帶到前面）

Question

只要焦點處於焦點位置，我想展開一個textarea（增加高度）。展開後，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的擴張工作正常，但我不能讓它顯示以上頁面上的其他元素（它顯示在後面的元素後面）。

是否有任何技巧在所有其他元素的前面顯示擴展的textarea？

更新：這是用來重現該問題的（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

設置position在textarea上工作。你也可以擺脫z-index。

Working demo

Answer 2

試試這個插件。應該快速簡單：http://unwrongest.com/projects/elastic/

Answer 3

嘗試設置樣式'position：absolute;'在第一個textarea（txt1）上，那應該可以做到。

Answer 4

添加z-index什麼也不做，而不必不是靜態的一個position其他的元素。就個人而言，我想補充一類具有所有的CSS變化和包括覆蓋，像這樣（demo）：

CSS

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

Answer 5

工作撥弄input和textarea ，主要是css有點jquery定位

http://jsfiddle.net/Ap5Xc/