[解決済み] 画像を右上に配置する - 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>
関連
-
Uncaught TypeError: document.getElementsById は関数ではありません。
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] Do I use <img>, <object>, or <embed> for SVG files?
-
[解決済み】HTMLで1つの画像を別の画像の上に配置するにはどうすればいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] CSS - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] HTMLのテーブルからボーダーを完全に削除する方法
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] hr要素の色を変更する
-
[解決済み] CSSでdivを縦にスクロールできるようにする
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?