Placer une image dans le coin supérieur droit - CSS

Question

J'ai besoin d'afficher une image dans le coin supérieur droit d'un div (l'image est un ruban "diagonal") mais en gardant le texte actuel contenu dans un div interne, comme collé au sommet de celui-ci.

J'ai essayé différentes choses comme inclure l'image dans un autre div ou définir sa classe comme :

.ribbon {
   position: relative;
   top: -16px;
   right: -706px;
}

<div id="content">
   <img src="images/ribbon.png" class="ribbon"/>
   <div>some text...</div>
</div>

mais sans succès. Le meilleur résultat que j'ai obtenu est que tout le texte défile vers le bas pour la même taille de hauteur de l'image.

Une idée ?

Answer 1

Vous pouvez le faire comme ça :

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

<div id="content">
    <img src="images/ribbon.png" class="ribbon"/>
    <div>some text...</div>
</div>

Answer 2

Positionner le div relativement, et positionnez le ruban absolument à l'intérieur. Quelque chose comme :

#content {
  position:relative;
}

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

Answer 3

En cherchant le même problème, j'ai trouvé un exemple

<style type="text/css">
#topright {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 125px;
    width: 125px;
    background: url(TRbanner.gif) no-repeat;
    text-indent: -999em;
    text-decoration: none;
}
</style>

<a id="topright" href="#" title="TopRight">Top Right Link Text</a>

L'astuce ici est de créer un petit (j'ai utilisé GIMP) PNG (ou GIF) qui a un fond transparent, (et puis juste supprimer le coin inférieur opposé).