覆盖背景图像右上角的文本

Question

我想知道如何在链接中看到通知计数（如下图所示）

我尝试使用具有背景图像的Span然后使用标记来实现类似的解决方案。

粗略地说，

<span class="message-icon" title="Unread Message" style="display: inline-block"></span><span style="background-color: red"><sup><b>5</b></sup></span>

这不在facebook的网站附近。

是否已有可用的煮熟解决方案？或任何想法如何实现？

Answer 1

看看这个：http://jsfiddle.net/D3VVv/1/ 来自这篇文章：How can i overlay an 10x10px image on top of another image?

如果您将包含消息图标的div设置为与消息图标+通知图标一样大，则可以使用absolute定位将通知图标放置在该div的右上角。正如小提琴所示。

Answer 2

有几种方法，这是一个绝对定位的例子：

http://jsfiddle.net/e2Zs4/

<强> HTML

<div class="con">

<img src="http://www.pictures-of-kittens-and-cats.com/images/cute-kitten-pictures-002-small.jpg" />

<img class ="number" src="http://www.privatefly.com/export/PrivateFly/.content/images/services/red_numbers_4.gif " />

</div>

<强> CSS

.con { width:100px; height:100px; position:relative; }
.number { position:absolute; top:10px; right:10px; }