Platzieren eines Bildes in der oberen rechten Ecke - CSS

Ich muss ein Bild in der oberen rechten Ecke eines Divs anzeigen (das Bild ist eine "diagonale" Multifunktionsleiste), aber den aktuellen Text in einem internen Div behalten, als ob ich oben daran kleben würde.

Ich habe verschiedene Dinge ausprobiert, wie das Einfügen des Bildes in ein anderes Div oder das Definieren seiner Klasse wie:

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

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

aber ohne Glück. Das beste Ergebnis war, dass der gesamte Text für die gleiche Höhe des Bildes nach unten gescrollt wurde.

Irgendeine Idee?

Sie können es einfach so machen:

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

Positionieren Sie das Band divrelativ und positionieren Sie das Farbband absolut darin. Etwas wie:

#content {
  position:relative;
}

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

Während ich mir das gleiche Problem ansah, fand ich ein Beispiel

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

Der Trick hier besteht darin, ein kleines (ich habe GIMP verwendetes) PNG (oder GIF) mit transparentem Hintergrund zu erstellen (und dann einfach die gegenüberliegende untere Ecke zu löschen).