Posizionamento di un'immagine nell'angolo in alto a destra - CSS

Ho bisogno di visualizzare un'immagine nell'angolo in alto a destra di un div (l'immagine è un nastro "diagonale") ma mantenendo il testo corrente contenuto in un div interno, come bloccato sopra di esso.

Ho provato diverse cose come includere l'immagine in un altro div o definire la sua classe come:

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

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

ma senza fortuna. Il miglior risultato che ho ottenuto è stato tutto il testo che scorreva verso il basso per la stessa dimensione in altezza dell'immagine.

Qualche idea?

Puoi farlo in questo modo:

#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}

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

Posiziona il divrelativamente e posiziona il nastro completamente al suo interno. Qualcosa di simile a:

#content {
  position:relative;
}

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

Osservando lo stesso problema, ho trovato un esempio

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

Il trucco qui è creare un piccolo (ho usato GIMP) un PNG (o GIF) con uno sfondo trasparente (e quindi eliminare l'angolo inferiore opposto).