Javascript HTML：覆盖到文本区域中心的动态定位
我无法在现有可调整大小的textarea元素上动态定位覆盖。 Textarea本身似乎不允许子节点，所以我必须将其创建为独立元素Javascript HTML：覆盖到文本区域中心的动态定位,javascript,html,css,Javascript,Html,Css,我无法在现有可调整大小的textarea元素上动态定位覆盖。 Textarea本身似乎不允许子节点，所以我必须将其创建为独立元素 <body> <textarea name="description" rows="20" cols="60"></textarea> <div class="overlay" style="width: 200px; height: 200px;">Something to show over the cent
<body>
<textarea name="description" rows="20" cols="60"></textarea>
<div class="overlay" style="width: 200px; height: 200px;">Something to show over the center of textarea</div>
</body>
要在文本区域中心显示的内容
也许我可以通过向TA添加大小更改处理程序并每次重新计算覆盖位置来实现这一点，但这对我来说似乎太麻烦了。还有其他更有效、更直接的方法吗？您可以通过将textarea放在父元素中，使用零javascript实现这一点。在本例中，我使用了一个div。使父div的大小可调整，并拉伸textarea以填充整个父div。然后仅使用相对定位，就可以将另一个元素直接定位在父div中心textarea的顶部
.parent
{
调整大小：两者；
宽度：300px；
高度：300px；
溢出：隐藏；
位置：相对位置；
}
文本区
{
调整大小：无；
宽度：100%；
身高：100%；
背景：#eee；
}
.parent.overlay
{
位置：绝对位置；
最高：50%；
左：50%；
宽度：100px；
高度：100px；
利润上限：-50px；
左边距：-50px；
背景：rgba（255,0,0,0.25）；
颜色：白色；
字体大小：20px；
框大小：边框框；
填充：35px0；
文本对齐：居中；
}
覆盖层