Colocar una imagen en la esquina superior derecha - CSS

Question

Necesito mostrar una imagen en la esquina superior derecha de un div (la imagen es una cinta "diagonal") pero manteniendo el texto actual contenido en un div interno, adherido en la parte superior de la misma como en este momento.

he intentado cosas diferentes que incluye la imagen en otro div o la definición de su clase como:

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

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

pero sin ninguna suerte. El mejor resultado que obtuve fue todo el texto desplazado hacia abajo para el mismo tamaño de altura de la imagen.

¿Alguna idea?

Answer 1

que sólo puede hacerlo de esta manera:

#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

Posición del div relativamente, y la posición de la cinta absolutamente en su interior. Algo así como:

#content { 
    position:relative; 
} 

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

Answer 3

Mientras observa el mismo problema, me encontré con un ejemplo

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

El truco aquí es crear una pequeña, (he usado GIMP) PNG (o GIF) que tiene un fondo transparente, (y luego simplemente elimine la esquina inferior opuesta).