div 右上角的位置图标

Question

我创建了这段代码，但我无法将图标放在类 valori 的 div 的右上角。

这里是期望的结果：

这里的代码：

HTML

 <div class="circletop">
<div class="numberpr">3° anno</div>
<div class="lordo">Valore lordo stimato</div>
<!--I add div icon here-->
<div class="icon"></div>
<div class="valori"> <?=$min3_anno ." - " . $max3_anno?></div>
</div>

这是我的小提琴： https ://jsfiddle.net/5g42Lx7n/ 我需要像图像一样在右上角添加图标。

谢谢

原文由 Em1991 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以添加一个图标，例如您的显示图像，这是解决方案

HTML:-

 <div class="circletop">
  <div class="numberpr">3° anno</div>
  <div class="lordo">Valore lordo stimato</div>
  <!--I add div icon here-->
  <div class="icon">my icon</div>
  <div class="valori"> &euro; 65.000 - &euro; 67.000</div>
</div>

CSS:-

 .circletop {
  /* circle styles */
  width: 300px;
  height: 300px;
      font-family: Raleway;
  border: 1px solid #222;
  border-radius: 50%;
  margin: 0 auto;
      box-shadow: 0 0 20px #ccc;

  /* become a flex container */
  /* its children will be flex items */
  display: flex;
  /* place items in column */
  flex-direction: column;
  /* center flex items horizontally */
  align-items: center;
  /* center all content vertically */
  justify-content: center;
}

/* simulate one more item to "balance" dex text */
.circletop:before {
  content: "\A0";
  visibility: hidden;
}

.lordo {
    color: #45cec8;
           padding-top: 10px;
    padding-bottom: 25px;
    font-weight: bold;
        font-size: 19px;
}

.valori {
    border-radius: 50px;
    background: #05c6bf;
    padding: 14px;
    width: 100%;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 9px #45cec8;
        font-size: 25px;
    font-weight: bold;
}
.icon {
    position: relative;
    bottom: -19px;
    right: -162px;
}

原文由 g8bhawani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

检查 https://jsfiddle.net/bgo2e5zk/4/

 .icon{position:absolute;right:0;top:-15px}
.valori{position:relative;}

I put the icon inside .valori , then add position:relative to .valori and position:absolute to .icon , and to finish , 将 top and left 设置为图标以定位它。

原文由 Roy Bogado 发布，翻译遵循 CC BY-SA 4.0 许可协议