右上に画像を配置する-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>

しかし運がありません。私が得た最良の結果は、画像の同じ高さサイズですべてのテキストが下にスクロールされたことです。

何か案が？

あなたはこのようにそれを行うことができます：

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

位置div比較的、絶対にその中にリボンを配置。何かのようなもの：

#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）を作成することです（そして、反対側の下隅を削除します）。