Posizionare un'immagine nell'angolo in alto a destra - CSS

Question

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, incollato in cima come al momento.

ho provato cose diverse come comprendente l'immagine in un altro div o definire la propria 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 alcuna fortuna. Il risultato migliore che ho ottenuto è stato tutto il testo scorretto verso il basso per le stesse dimensioni in altezza dell'immagine.

Qualche idea?

Answer 1

appena può fare 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> 

Answer 2

Posizionare il div relativamente, e posizionare il nastro assolutamente al suo interno. Qualcosa di simile:

#content { 
    position:relative; 
} 

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

Answer 3

Guardando 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 è quello di creare un piccolo, (io ho usato GIMP) un PNG (o GIF) che ha uno sfondo trasparente, (e quindi basta eliminare l'angolo inferiore opposto.)