你可以这样做：

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

相对定位div，并将Ribbon绝对定位在其内部。类似于：

#content {
  position:relative;
}

.ribbon {
  position:absolute;
  top:0;
  right:0;
}

在看同一个问题时，我发现了一个例子

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

这里的技巧是创建一个小的，（我用GIMP）一个PNG（或GIF），有一个透明的背景，（然后只是删除相反的底角。）

尝试使用float: right;和一个新的div作为顶部，这样图像就可以保持在顶部。
示例如下：

#left{
  float: left;
}
#right{
  float: right;
}

<div>
  <button type="button" id="left" onclick="alert('left button')">Left</button>     
    <img src="images/ribbon.png" class="ribbon" id="right">
    </img>
</div>
  <p>some text...
  the image is on the top right corner</p>
 <p>some more text...</p>

<style>
    img {
        border: 2px solid black;
    }
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: -2px;
        right: 8px;
    }
    </style>

<div id="content">
    <img src="Example.png" class="ribbon" alt="" />
</div>