css 样式 小红点提醒

很多网站，会有未读信息的提醒（如下图：）

这里的样式主要用到定位  

文档链接：https://www.w3school.com.cn/cssref/pr_class_position.asp

<div class="posttitle1">
     <div class="posttitle1l">
        <img src="../../../../../../r/cms/www/xasrcwFront/images/resumeicon.png">
     </div>
     <!-- 提醒 -->
     <div v-if="unreadResume>0" class="unreadResumeWarning">
          <span class="unreadResumeCount">{{unreadResume}}</span>
     </div>
     <div class="posttitle1r">
          <a :href="apiHost+'firm/administration'" target="_blank">
               查看简历
          </a>
     </div>
</div>

unreadResume是自定义变量（整型），当未读的信息大于0时，提醒的小红点才会出现； 

父级盒子设置css    position: relative;

css样式如下

.posttitle1 {
    width: 213px;
    height: 60px;
    margin: 0 auto;
    margin-top: 9%;
    border-bottom: 1px solid #E6E6E6;
    position: relative;
}

.unreadResumeWarning {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #FF3B30;
    position: absolute;
    left: 28px;
    top: 10px;
}

.unreadResumeCount {
    display: block;
    width: 100%;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: #fff;
    font-size: 12px;
}