Javascript 使用位置在图像上添加文本

我想在图像上动态添加文本。 我尝试使用javascript/jQuery来实现这一点。 代码如下：

$(document).ready(function()
{
    var img = $("img#back1");
    var leftpos =  img.position().left;
    var toppos =  img.position().top;
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.top = toppos+"px";
    div.style.left = leftpos+"px";
    div.innerHTML = '<font> back </font>';
    div.style.background = '#CC0000';
    document.body.appendChild(div);
});

$（文档）.ready（函数（）
{
var img=$（“img回溯1”）；
var leftpos=img.position（）.left；
var toppos=img.position（）.top；
var div=document.createElement（'div'）；
div.style.position='绝对'；
div.style.top=toppos+“px”；
div.style.left=leftpos+“px”；
div.innerHTML='back'；
div.style.background='#CC0000'；
文件.正文.附件（div）；
});

完成此操作后，我不会在图像上“返回”文本。 这里，无法检索正确的位置，将其传递到div标记的顶部和左侧，以指定其上的文本。 如果我在什么地方出了问题，请建议/纠正我

---

谢谢

您应该访问此网站：

---

这是一个很好的教程，为您的porpus。我建议您学习更多的jQuery，因为除了

.ready（）

文本没有出现或根本不合适之外，您的所有javascript代码都没有使用ans jQuery功能

如果看不到文本，可能需要在DIV元素中指定“z-index”属性

---

要在javascript中添加属性，您可以阅读：

在图像上添加文本的更好方法是使用css将图像置于背景上。这有很多好处。你可以在这里查看演示

来自

.position（）方法允许我们检索元素相对于偏移父元素的当前位置。将其与.offset（）进行对比，后者检索相对于文档的当前位置

---

由于动态创建的

div

被附加到

主体

，因此使用

offset（）

而不是

位置

可能会有所帮助。

您是否可以在这里发布HTML代码以及CSS，如果您可以提供JSFIDLE链接更好。可能是您的div缺少Z-index不确定。