Css 通知背景位置问题

有一个CTA按钮，上面有一个小小的通知气泡：

我成功地将数字2定位到正确的位置，但背景本身定位不正确：

这是我的HTML：

<button type="button" class="btn btn-link center-block green" role="link" type="submit" name="op" value="Link 2">see our vacancies<sup class="notify">2</sup></button>

这是一个例子

---

我做错了什么？谢谢您的帮助。

修改

。按如下方式通知
，并使用
而不是

综合起来：
*{
框大小：边框框；
}
.btn-link.green{
边缘顶部：65px；
文字装饰：无；
边界：无；
背景色：#1dcb8b；
颜色：白色；
填充：15px 30px；
位置：相对位置；
}
.通知{
位置：绝对位置；
顶部：-20px；
背景：#1dcb8b；
填充：10px 0px 10px 0px；
文本对齐：居中；
宽度：50px；
高度：50px；
边界半径：100%；
边框：2px实心#052c57；
字体大小：1.3rem；
}
查看我们的真空2
修改
。按如下方式通知
，并使用
而不是

综合起来：
*{
框大小：边框框；
}
.btn-link.green{
边缘顶部：65px；
文字装饰：无；
边界：无；
背景色：#1dcb8b；
颜色：白色；
填充：15px 30px；
位置：相对位置；
}
.通知{
位置：绝对位置；
顶部：-20px；
背景：#1dcb8b；
填充：10px 0px 10px 0px；
文本对齐：居中；
宽度：50px；
高度：50px；
边界半径：100%；
边框：2px实心#052c57；
字体大小：1.3rem；
}
查看我们的真空2
默认情况下，sup标记向上移动文本，因此我建议改用span标记

然后像这样更改CSS：

.notify {
    position: absolute;
    top: -25px;
    right: -25px;
    background: #1dcb8b;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border-radius: 100%;
    border: 2px solid #052c57;
    font-size: 1.3rem;
}

默认情况下，sup标记向上移动文本，因此我建议改用span标记

然后像这样更改CSS：

.notify {
    position: absolute;
    top: -25px;
    right: -25px;
    background: #1dcb8b;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border-radius: 100%;
    border: 2px solid #052c57;
    font-size: 1.3rem;
}


.btn-link.green{
边缘顶部：65px；
文字装饰：无；
边界：无；
背景色：#1dcb8b；
颜色：白色；
填充：15px 30px；
位置：相对位置；
}
.通知{
位置：绝对位置；
顶部：-30px；
右：-25px；
背景：#1dcb8b；
宽度：50px；
高度：50px；
边界半径：100%；
边框：2px实心#052c57；
字体大小：1.3rem；
线高：3rem；
}
查看我们的空缺
2.

.btn-link.green{
边缘顶部：65px；
文字装饰：无；
边界：无；
背景色：#1dcb8b；
颜色：白色；
填充：15px 30px；
位置：相对位置；
}
.通知{
位置：绝对位置；
顶部：-30px；
右：-25px；
背景：#1dcb8b；
宽度：50px；
高度：50px；
边界半径：100%；
边框：2px实心#052c57；
字体大小：1.3rem；
线高：3rem；
}
查看我们的空缺
2.
灵活版，允许您更改宽度和高度，所有内容都将保持不变


.btn-link.green{
边缘顶部：65px；
文字装饰：无；
边界：无；
背景色：#1dcb8b；
颜色：白色；
填充：15px 30px；
位置：相对位置；
}
.通知{
背景：#1dcb8b；
宽度：50px；
高度：50px；
边界半径：100%；
边框：2px实心#052c57；
字体大小：1.3rem；
显示：内联flex；
位置：绝对位置；
前-50%；
}
/*水平和垂直居中文本*/
.notify>span{
保证金：自动；
}

看看我们的假期
灵活版，允许您更改宽度和高度，所有内容都将保持不变


.btn-link.green{
边缘顶部：65px；
文字装饰：无；
边界：无；
背景色：#1dcb8b；
颜色：白色；
填充：15px 30px；
位置：相对位置；
}
.通知{
背景：#1dcb8b；
宽度：50px；
高度：50px；
边界半径：100%；
边框：2px实心#052c57；
字体大小：1.3rem；
显示：内联flex；
位置：绝对位置；
前-50%；
}
/*水平和垂直居中文本*/
.notify>span{
保证金：自动；
}

看看我们的假期
你能让你的代码可执行吗？你能让你的代码可执行吗？我建议只从顶部和底部添加填充，因为如果有例如100，它将如下所示：我建议只从顶部和底部添加填充，因为如果有例如100，它将如下所示：
.notify {
    position: absolute;
    top: -25px;
    right: -25px;
    background: #1dcb8b;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border-radius: 100%;
    border: 2px solid #052c57;
    font-size: 1.3rem;
}