将 <span> 绝对定位在 <textarea> 的底部答案

【问题标题】：Position <span> absolute over bottom of <textarea>将 <span> 绝对定位在 <textarea> 的底部
【发布时间】：2015-11-18 17:27:40
【问题描述】：

我有以下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)

【问题讨论】：

我可以用div把它们都包起来吗？
@alirezasafian - 是的。我使用带有 MVC 的自定义 html 助手创建所有元素，因此我可以在此助手方法的定义中包含父 div

标签： javascript html css

【解决方案1】：

最简单的方法是将 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;
}

您可以将跨度设置为看起来像文本区域的底部，这样文本将永远不会在视觉上超出字符数。

【讨论】：

现在，可能就是答案了。
抱歉，加码前按错回复了:)

【解决方案2】：

最简单的方法是将文本区域和标签包装在一个 div 中，应用相对位置并将 div 设置为 inline-block。然后，您将能够根据需要相对于文本区域定位标签。

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

【讨论】：

【解决方案3】：

如前所述，使用 div 来包装 textarea 和 span。你的texarea 有一个css height，所以把div 放到position:relative，span 的添加顶部等于文本区域高度(top:100px)。如果元素具有position:relative，则具有绝对位置的元素相对于其父元素进行定位

【讨论】：