将图像放置在右上角 \- CSS

Question

我需要在 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>

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

任何想法？

原文由 Randomize 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以这样做：

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

原文由 Rok Kralj 发布，翻译遵循 CC BY-SA 4.0 许可协议