相对于图像的绝对位置

Question

有没有办法相对于img 标签定位元素？

当然，我可以在一个 div 中制作这个图像，然后相对于这个 div 定位元素。但是假设图像已经定位，我不想添加其他元素。

这是一个示例：http://jsfiddle.net/bortao/MQf3D/

蓝色的 div 应该在图片的左上角 (0px/0px)

HTML

<img class="im" /> 
<div class="di">Absolute</div>

CSS

.im {
    position: relative;
    left: 20px;
    top: 60px;
}

.di {
    position: absolute;
    left: 0px;
    top: 0px;
    border: solid 1px blue;
}

Answer 1

您实际上可以使用图像的类作为图像和文本的父 div：

<div class="outer">
    <div class="im">
        <img src="http://placekitten.com/200/300"> 
        <div class="di">Absolute</div>
    </div>
</div>

小提琴：http://jsfiddle.net/MQf3D/2/