5
votes

Icône de position dans le coin supérieur droit d'un div

J'ai créé ce code, mais je n'arrive pas à mettre l'icône dans le coin droit de div avec la classe valori.

Voici le résultat souhaité:

entrez la description de l'image ici

Voici le code:

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>

Voici mon violon: https://jsfiddle.net/5g42Lx7n/ Je dois ajouter l'icône dans le coin supérieur droit comme l'image.

merci

html css

1 commentaires

pouvez-vous également lier votre icône dans votre lien de démonstration?

5 Réponses :

1
votes

Placez l'icône div dans valori div et définissez valori sur position: relative et l'icône sur position: absolu . Voir le code ci-dessous

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

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

0 commentaires

6
votes

Vérifiez https://jsfiddle.net/bgo2e5zk/4/

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

0 commentaires

5
votes

Vous pouvez ajouter une icône comme votre image de projection, voici la solution

HTML: -

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

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>

0 commentaires

1
votes

Vous devez positionner votre icône. J'ai utilisé une icône factice, vous pouvez essayer d'utiliser la vôtre et jouer avec la position qui convient à vos besoins.

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

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

0 commentaires

1
votes

z-index: 1000;

0 commentaires