绝对位置在<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就可以做到这一点。

---

编辑：

我使用ASP.NET MVC中的自定义html助手创建了上面所有的html元素：

@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中，应用相对位置并将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

Answer 3

如前所述，使用div包装textarea和span。你的texarea有一个css height，所以把div放在position:relative上，span的顶部加起来等于文本区域的高度(top:100px)。如果具有position:relative