将图片放在右上角-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>

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

任何的想法？

Answer 1

您可以这样做：

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