将图像放置在右上角 - CSS

我需要在 div 的右上角显示图像（该图像是“对角线”功能区），但将当前文本保留在内部 div 中，就像粘在其顶部一样。

我尝试了不同的方法，例如将图像包含在另一个 div 中或定义其类，例如：

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

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

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

任何想法？

你可以这样做：

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

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