html - 将图像放在右上角 - CSS

Question

我需要在 div 的右上角显示一个图像(图像是一个“对 Angular 线”色带)，但将当前文本保留在一个内部 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

你可以这样做:

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