Umieszczanie obrazu w prawym górnym rogu - CSS

Question

Potrzebuję wyświetlić obraz w prawym górnym rogu elementu div (obrazek jest "ukośną" wstążką), ale zachowując bieżący tekst w wewnętrznym div, przyklejonym na razie jak na razie.

Próbowałem różnych rzeczy, jak w tym obraz w innym div lub definiując klasę jak:

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

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

ale bez powodzenia. Najlepszym wynikiem był cały tekst przewijany w dół dla tej samej wysokości obrazu.

Każdy pomysł?

Answer 1

Można po prostu zrobić to tak:

#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

Ustaw div stosunkowo, i umieść taśmę absolutnie wewnątrz niego. Coś jak:

#content { 
    position:relative; 
} 

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

Answer 3

Patrząc na ten sam problem, znalazłem przykład

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

Sztuką jest stworzenie małej, (użyłem GIMP) PNG (lub GIF), który ma przezroczyste tło (a następnie po prostu usuń przeciwległy dolny róg).