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

Question

我有一点css问题，我不知道它在css中完全可以做到这一点，但我接受任何其他解决方案。 在这里，我有一个我想要完成的例子。

我正在尝试在分区的右上角添加红色圆圈。 我的代码是：

HTML

<div class="w3-container customheight">
  <div class="center buttons">
    <a class="todo roundbutton">
      <div class="redicon"></div>
      <div class="redicontext">
        <span class="todotext">1</span>
      </div>
    </a>
    <a class="decision roundbutton">
      <div class="redicontext">
        <span class="decisiontext">2</span>
      </div>
    </a>
    <a class="remark roundbutton">
      <div class="redicontext"></div>
        <span class="remarktext">3</span>
      </div>
    </a>
  </div>
</div>

CSS

.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%;
}

我已经尝试了很多东西：    - 在第一个div后面创建另一个div，在该div上使用填充而不创建ovale    - 红色圆圈的绝对值，可以使用一定的高度和宽度，但它必须有效。

我在CSS中不是那么好，但我知道基础知识。 对此的任何帮助都非常好！

问候！

Answer 1

使用relative位置并定位圆圈。

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

<强>段

.center{
  margin: 0 auto;
}
.roundbutton{
  width: calc(33.333% - 20px);
  height: 130px;
  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("//placehold.it/150");
  background-color: #fff;
  border-radius: 100%;
}

.decision{
  background-image: url("//placehold.it/150");
  background-color: #fff;
  border-radius: 100%;
}

.remark{
  background-image: url("//placehold.it/150");
  background-color: #fff;
  border-radius: 100%;
}   

.redicon{
  position: absolute;
  top: -10px;
  right: -10px;
  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%;
}

<div class="w3-container customheight" style="width: 450px;">
  <div class="center buttons">
    <a class="todo roundbutton">
      <div class="redicon"></div>
      <div class="redicontext">
        <span class="todotext">1</span>
      </div>
    </a>
    <a class="decision roundbutton">
      <div class="redicontext">
        <span class="decisiontext">2</span>
      </div>
    </a>
    <a class="remark roundbutton">
      <div class="redicontext">
        <span class="remarktext">3</span>
      </div>
    </a>
  </div>
</div>

预览