将图标定位在 div 元素的右上角

Question

我创建了这段代码，但是我无法将图标放在 class 为 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

---

你能在演示链接中也添加你的图标吗？ - Rahul

Answer 1

Check https://jsfiddle.net/bgo2e5zk/4/

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

我将图标放置在.valori内，然后给.valori添加position:relative，给.icon添加position:absolute，最后设置top和left以定位图标。

- Roy Bogado

---

请问您为什么在valori中添加了position:relative？我不知道如何使用子绝对定位和父相对定位的组合，有没有教程可以指导这个概念？ - Rohan Devaki

Answer 2

您可以像显示的图片一样添加图标，以下是解决方案：

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

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>

- Hamza Arab

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>

- ScrapCode

Answer 5

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

可能会存在不必要的填充和边距。如果有：

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

其他方式添加这个：

z-index: 1000;

- john alcantara