将图像放置在右上angular – CSS

我需要在div的右上angular显示一个图像(图像是一个“对angular线”function区),但是将当前的文本保存在内部div中,像现在一样粘在顶部。

我尝试了不同的东西,包括在另一个div中的图像或定义类:

.ribbon { position: relative; top: -16px; right: -706px; } <div id="content"> <img src="images/ribbon.png" class="ribbon"/> <div>some text...</div> </div> 

但没有任何运气。 我得到的最好的结果是所有的文字向下滚动的图像相同的高度尺寸。

任何想法?

你可以这样做:

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

div放在相对位置,并把色带完全放在里面。 就像是:

 #content { position:relative; } .ribbon { position:absolute; top:0; right:0; } 

在看同样的问题的同时,我find了一个例子

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

这里的诀窍是创build一个小的(我使用GIMP)一个具有透明背景的PNG(或GIF),(然后删除相反的底angular)。