Css 如何在DIV的顶部插入一个浮动圆？

我有一张用bootstrap创建的卡，我需要找到一种方法在卡的顶部插入一个圆圈

我的代码：（演示中）

.数字圆圈{
宽度：39.6px；
高度：39.6px；
边界半径：50%；
文本对齐：居中；
字体大小：21.6px；
边框：2倍实心#3498db；
颜色：白色；
背景：#3498db；
}
30
卡片标题
一些快速卡片描述

这就是我所期望的结果：

---

我该怎么做？

您必须将圆设置为

位置：绝对您可以在顶部和中间设置它。
对于左侧位置，可以使用
calc（）

这是我在圆上使用的绝对值和相对于卡体的位置

我用叉子叉了你的小提琴：


.numberrcle{
宽度：39.6px；
高度：39.6px；
边界半径：50%；
文本对齐：居中；
字体大小：21.6px；
边框：2倍实心#3498db；
颜色：白色；
背景：#3498db；
位置：绝对位置；
顶部：-20px；
左：50%；
转换：translateX（-50%）
}
.卡体{
位置：相对位置；
填充顶部：30px；
}

30
卡片标题
一些快速卡片描述
我认为这应该会有帮助，把它放在数字圈中

position: relative;
left: 50%;
top: -20;

您可能需要签出
位置
CSS属性。它允许您将元素定位到任何您想要的位置，可以是相对于页面或其父元素的位置

以下是更新后的CSS：

.card-body {
    position: relative;
}

.numberCircle {
    width: 39.6px;
    height: 39.6px;
    border-radius: 50%;
    text-align: center;
    font-size: 21.6px;
    border: 2px solid #3498db;
    color: white;
    background: #3498db;
    position: absolute;
    margin: auto;
    top: -20px;
    right: 0;
    left: 0;
}

可以通过在圆上使用
变换
来完成此操作。
还要注意，我将px值更改为整数，不能有逗号像素值。这些值无论如何都是无效的


.numberrcle{
宽度：40px；
高度：40px；
边界半径：50%；
文本对齐：居中；
字体大小：22px；
边框：2倍实心#3498db；
颜色：白色；
背景：#3498db；
保证金：0自动；
z指数：1；
转化：translateY（-50%）；
线高：40px；
}
.卡片{
边框：1px纯绿色；
}

30
卡片标题
一些快速卡片描述
使用left:50%并翻译x，而不是使用calc。有一把小提琴，试试看，它不起作用-1因为简短不正确的回答如果简短为什么会有问题如果不起作用我可以理解。
position: relative;
left: 50%;
top: -20;

.card-body {
    position: relative;
}

.numberCircle {
    width: 39.6px;
    height: 39.6px;
    border-radius: 50%;
    text-align: center;
    font-size: 21.6px;
    border: 2px solid #3498db;
    color: white;
    background: #3498db;
    position: absolute;
    margin: auto;
    top: -20px;
    right: 0;
    left: 0;
}