Позиция <span> абсолютные над нижними <textarea>

Question

У меня есть следующий HTML:

<textarea cols="20" data-val="true" data-val-required="The Note field is required." id="Note" name="Note" onkeyup="var element = document.getElementById('Note'); var counter = document.getElementById('Note_counter'); var characterCount = element.value.length; var remaining = 1000 - parseInt(characterCount); if (remaining < 0) { element.value = element.value.substr(0, 1000); remaining = 0; } counter.innerHTML = remaining;" rows="2" style="width: 360px;"></textarea> 
<span><span id="Note_counter">1000</span> characters remaining</span> 

Это состоит из более <textarea> и счетчика в <span> элементе, который следует. Я хочу установить абсолютное позиционирование элемента <span> на нижнюю нижнюю часть <textarea> независимо от того, где на странице находится <textarea> или насколько он широк/сужен.

Смотреть это jsfiddle

Там может быть несколько из этих <textarea/><span/> комбинаций на этой странице. Нет jQuery. Я надеюсь, что смогу сделать это с помощью css.

---

Edit:

создать все HTML-элементы выше, с помощью пользовательского HTML помощник в ASP.NET MVC:

@CustomHtml.CustomTextAreaFor(Html, model => model.Note) 

Answer 1

Самый простой способ будет обернуть текстовое поле в DIV и примените нижнюю прокладку и положение относительно этого.

<div class="wrapper"> 
    <textarea></textarea> 
    <span class="char-count">1000</span> 
</div> 

.wrapper{ 
    position:relative; 
    padding-bottom:20px; 
} 

.char-count{ 
    position:absolute; 
    height:20px; 
    left:0; 
    bottom:0; 
} 

Вы можете стиль пядь, чтобы выглядеть в нижней части текстового поля, таким образом текст никогда не будет визуально переполнить количество символов.

Answer 2

Как уже говорилось, используйте div для обертывания как textarea, так и span. У вашего texarea есть css height, поэтому поставьте div на position:relative, добавьте верхнюю часть span, равную высоте textarea (top:100px). Элементы с абсолютным положением расположены по сравнению с их родительским, если у этого есть position:relative

Answer 3

Самый простой способ - обернуть ваше текстовое поле и метку в div, применить относительное положение и установить div в встроенный блок. Затем вы сможете поместить метку по своему усмотрению относительно текстовой области.

HTML:

<div class="textarea-wrapper"> 
<textarea cols="20" data-val="true" data-val-required="The Note field is required." id="Note" name="Note" onkeyup="var element = document.getElementById('Note'); var counter = document.getElementById('Note_counter'); var characterCount = element.value.length; var remaining = 1000 - parseInt(characterCount); if (remaining < 0) { element.value = element.value.substr(0, 1000); remaining = 0; } counter.innerHTML = remaining;" rows="2" style="width: 360px;"></textarea> 
<span id="Note_counter_label"><span id="Note_counter">1000</span> characters remaining</span> 
</div> 

CSS:

.textarea-wrapper { 
    position: relative; 
    display: inline-block; 
} 

Я обновил ваш jsfiddle