Разверните текстовую область (и выведите ее на передний план), пока она имеет

Question

Я хочу расширить текстовую область (увеличить высоту), пока она имеет фокус.При расширении текстовое поле не должно перемещать содержимое вниз, вместо этого оно должно отображаться поверх другого содержимого.

Это код, который я использую до сих пор ( см. Здесь пример ):

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

Расширение текстовой области работает нормально, но я не могу отобразить его над другими элементами на странице (оно отображается за последующими элементами).

Есть ли уловки, чтобы показать расширенную текстовую область над / перед всеми другими элементами?

Обновление : это (минимальный) 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.

Рабочая демоверсия

Answer 2

Добавление 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 3

Попробуйте установить стиль 'position: absolute;'на первой текстовой области (txt1), и это должно сработать.

Answer 4

рабочая скрипка с input и textarea, в основном css с небольшим jquery для позиционирования

http://jsfiddle.net/Ap5Xc/

Answer 5

Попробуйте этот плагин. Должно быть быстро и просто: http://unwrongest.com/projects/elastic/