Javascript 职位<；span>；绝对超过底部<；textarea>；

我有以下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包装在一个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;
}

1000
.包装纸{
位置：相对位置；
垫底：20px；
}
.字符数{
位置：绝对位置；
高度：20px；
左：0；
底部：0；
}

---

您可以设置span的样式，使其看起来像textarea的底部，这样文本就不会在视觉上溢出字符计数。

如前所述，使用div来包装textarea和span。您的

texarea

具有

css高度，因此将
div
放在
位置：相对
，span
的添加顶部等于textarea高度
（顶部：100px）
。如果具有绝对位置的元素具有
position:relative
的父元素，则将其与绝对位置的元素进行比较。最简单的方法是将文本区域和标签包装在div中，应用position relative并将div设置为inline block。然后，您将能够根据需要相对于文本区域定位标签

HTML:

我已经更新了你的
我可以用一个
div
@alirezasafian来包装它们吗？是的。我使用带有MVC的自定义html帮助程序创建所有元素，因此我可以在此帮助程序方法的定义中包含父div。现在，这可能就是答案。很抱歉，在添加代码之前错误地按了reply:）
<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;
}

<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>

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