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

Question

我想在我的网站上制作一个像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一样.谢谢.

Answer 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>

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