制作带有通知计数的通知图标

【问题标题】：Making a notification icon with notification count制作带有通知计数的通知图标
【发布时间】：2013-03-30 15:02:10
【问题描述】：

我想在我的网站（如 facebook）上制作一个通知图标。 Facebook 在左上角显示通知图标。在 facebook 上，图标旁边有许多通知。我想做同样的事情。我想在通知图标旁边显示通知数量，就像 facebook 一样。我为此创建了这段代码：

<style>
    .icon {
        width:30px; 
        height:30px;
    }
    .txt {
        padding:-10px 0 0 10px;
        background:red; 
        font-size:xx-small;
    }
</style>

<div class="icon">
    <img src="icon.bmp" alt="none" width="100%" height="100%" />
    <div class="txt">10</div>
</div>

但这并没有发生。请任何人帮助我如何使它像facebook一样。谢谢。

【问题讨论】：

我的回答对你有帮助吗？
非常感谢马塞尔。这真的是很棒的答案。你会很高兴知道这个答案也帮助我找到了许多问题的合适答案。我非常感谢你。
很高兴听到这个消息，那么请接受答案，这样问题就不再“开放”了。

标签： html css

【解决方案1】：

只需使用position: relative; 作为图标，使用position: absolute; 作为文本。使用top 和left 定义到图标的距离。

.icon {
    width:30px; 
    height:30px;
    position: relative;
}
.txt{
    background-color:red;
    font-size:xx-small;
    position: absolute;
    padding:2px;
    top: 5px;
    left: 5px;
    border-radius: 25px;
}

<div class="icon">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" alt="none" width="100%" height="100%" />
    <div class="txt">10</div>
</div>

我还将图标定义为带有 css 的 .icon 的背景图像，并删除 img 标记。

【讨论】：