Une classe CSS chevauchant une autre classe CSS (image jointe)

Question

Je crée un site Web de commerce électronique. Tout en montrant la boîte de remise, l'image de l'article est décalée vers la gauche (image ci-dessous). Je veux la boîte de réduction (couleur bleue) au-dessus de la classe d'article. Est-ce que quelqu'un peut m'aider avec ça?

fichier CSS

div.item 
{ 
    margin-top:0px; 
    padding-top:20px; 
    text-align:center; 
    width:160px; 
    float:left; 
    border:1px solid red; 
} 

div.discount 
{ 
    width:30px; 
    height:30px; 
    border:1px solid blue; 
    float:right; 
    margin-right:30px; 
    margin-top:10px; 
} 

fichier HTML

<div class="item"> 
    <img src="items/1/s/a.jpg"/> 
    <div class="discount"> 
      50% discount 
    </div> 
</div> 

---

Mon exemple - la boîte bleue ne chevauche pas l'image. Au lieu de cela, il déplace l'image.

---

Je veux comme ceci: dans quelle boîte d'actualisation chevauche l'image/CSS classe

Answer 1

Utilisez d'abord l'étiquette de réduction absolue dans l'élément div

div.item 
{ 
    margin-top:0px; 
    padding-top:20px; 
    text-align:center; 
    width:160px; 
    border:1px solid red; 
    position :relative; 
} 

div.discount 
{ 
    width:30px; 
    height:30px; 
    border:1px solid blue; 
    position: absolute; 
    top: 20px; 
    left: 20px; 
} 

Answer 2

Vous pouvez utiliser l'index z et le positionnement absolu sur le div le plus haut. Quelque chose comme:

div.discount 
{     
    width:30px; 
    position: absolute; 
    z-index: 10; 
    top: 8px; 
    right: 8px; 
    height:30px; 
    border:1px solid blue;   
} 

Vous pouvez également utiliser des pourcentages au lieu de px en haut et à droite pour le rendre un peu plus souple.

Editer: Vous devrez également ajouter position: relative à div.item (la position absolue s'applique en fonction de l'élément contenant le plus proche avec une position appliquée).

z-index n'est pas strictement nécessaire tant que la chose que vous voulez en haut apparaît avant la chose en bas dans le code. J'ai parfois envie de le mettre juste au cas où les choses se déplaceraient plus tard.

Answer 3

Vous pouvez utiliser le positionnement absolu pour placer la boîte bleue en haut, assurez-vous simplement que l'élément parent est défini sur position:relative.

div.item 
{ 
    margin-top:0px; 
    padding-top:20px; 
    text-align:center; 
    width:160px; 
    float:left; 
    border:1px solid red; 
    position:relative; 
} 

div.discount 
{ 
    width:30px; 
    height:30px; 
    border:1px solid blue; 
    position:absolute; 
    right:30px; 
    top:10px; 
} 

Answer 4

div.item { position:relative; } 
div.discount { position:absolute; top:-5px; left: -5px; } 

Answer 5

Ceci est quelque chose de rapide je compose, devrait travailler pour vous: JsFiddle Demo