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/  我需要在图像的右上角添加图标。

谢谢

Answer 1

选中https://jsfiddle.net/bgo2e5zk/4/

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

我将图标放在.valori内，然后将position:relative添加到.valori并将position:absolute添加到.icon，最后，将top and left设置为图标定位它。

Answer 2

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

HTML：-

format -> rename

CSS：-

<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>

Answer 3

将图标div放入valori div中，并将valori设置为position:relative，将图标设置为position:absolute。参见下面的代码

.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;
    position: relative;
}
.icon {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  right: -5px;
  top: -5px;
}

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

Answer 4

您需要放置图标。我使用了一个虚拟图标，您可以尝试使用它并按照自己的需要进行游戏。

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

.imageRight {
  position: relative;
  float: right;
  top: -20px;
  right: -10px;  
}

<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?><img class="imageRight" src="https://img.icons8.com/windows/24/000000/checkmark.png"></div>
</div>

Answer 5

.valori {
     position: absolute;
     right: 0;
     top: 0;
     }

可能会有不需要的填充和边距。如果是这样：

.valori {
     position: absolute;
     right: 0;
     top: 0;
     margin: 0;
     padding: 0;
     }

否则添加此内容：

z-index: 1000;