1. ホーム
  2. html

[解決済み] 画像を右上に配置する - CSS

2022-05-12 08:09:23

質問

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>

といった具合ですが、うまくいきません。私が得た最高の結果は、画像の同じ高さサイズに対して、すべてのテキストがスクロールダウンしたことです。

何かアイデアはありますか?

どのように解決するのですか?

このようにすればいいのです。

<style>
    #content {
        position: relative;
    }
    #content img {
        position: absolute;
        top: 0px;
        right: 0px;
    }
</style>

<div id="content">
    <img src="images/ribbon.png" class="ribbon"/>
    <div>some text...</div>
</div>