Css 如何在居中div的右上角放置一个红色圆圈？

我有一个小小的css问题，我不知道在css中完全可以做到这一点，但我也接受任何其他的解决方案。 这里我举了一个我正在努力完成的例子

我试图在分区的右上角添加红色圆圈。 到目前为止，我的代码是：

HTML

我已经尝试了多种方法： -在第一个div后面创建另一个div，以便在该div上使用填充，而不创建椭圆 -对于红色圆圈的绝对值，可以在一定的高度和宽度下使用，但它必须工作

我对css不是很在行，但我知道一些基本知识。 这方面的任何帮助都非常好

---

你好

使用

相对
定位并定位圆

.redicon{
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  padding:10px;
  box-sizing: border-box;
  border-radius: 100%;
}

片段


.center{
保证金：0自动；
}
.圆形按钮{
宽度：钙（33.333%-20px）；
高度：130像素；
利润率：10px；
边缘顶部：20px；
边缘底部：20px；
显示：块；
背景尺寸：包含；
浮动：左；
背景重复：无重复；
背景位置：中心；
位置：相对位置；
}
托多先生{
背景图像：url（“//placehold.it/150”）；
背景色：#fff；
边界半径：100%；
}
.决定{
背景图像：url（“//placehold.it/150”）；
背景色：#fff；
边界半径：100%；
}
.备注{
背景图像：url（“//placehold.it/150”）；
背景色：#fff；
边界半径：100%；
}   
雷迪肯先生{
位置：绝对位置；
顶部：-10px；
右：-10px；
背景：红色；
填充：10px；
框大小：边框框；
边界半径：100%；
}
.redicontext{
位置：绝对位置；
顶部：10px；
右：3%；
填充：10px；
框大小：边框框；
边界半径：100%；
}

1.
2.
3.

.center{
  margin: 0 auto;
}
.roundbutton{
  width: calc(33.333% - 20px);
  height: 100%;
  margin: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  display:block;
  background-size: contain;
  float:left;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.todo{
  background-image: url("../img/todo.jpg"); 
}

.decision{
  background-image: url("../img/decision.jpg"); 
}

.remark{
  background-image: url("../img/remark.jpg"); 
}   

.redicon{
  position: absolute;
  top: 10px;
  left: 3%;
  background: red;
  padding:10px;
  box-sizing: border-box;
  border-radius: 100%;

}

.redicontext{
  position: absolute;
  top: 10px;
  right: 3%;
  padding:10px;
  box-sizing: border-box;
  border-radius: 100%;
}

.redicon{
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  padding:10px;
  box-sizing: border-box;
  border-radius: 100%;
}