HTML/CSSにおいて、『画像（img要素）の上に文字を重ねる方法』を紹介します。
こんな人にオススメ
- HTML/CSSで画像（img要素）の上に文字を重ねたい
目次
何も指定しない場合
NGパターン：何も指定しない
何も指定せず、画像『img』と文字『p』を記載します。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
画像の下に文字が記載されます。
- 画像の上に文字が重なっていません
解決方法
では解決方法を紹介します。
OKパターン：画像に『position: relative』文字に『position: absolute』を指定する
・画像（奥に配置されるもの）…『position: relative』
・文字（手前に配置されるもの）…『position: absolute』
を指定します
加えて、文字（手前に配置されるもの）に対し『top』『bottom』『right』『left』で相対位置を指定します。
今回であれば画像の上（top）から30px、左（left）から30pxに文字が配置されます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 画像（img要素）の上に文字が重なっています
配置を重ねることができました。
本格的にHTML/CSSを学びたい方は
本格的にHTML/CSSを学びたい方は『TechAcademy(テックアカデミー)』がオススメです。
- 現役エンジニアによるマンツーマンサポート
- はじめての副業に必要なスキルが学べる
- 無料メンター相談が可能
「短期間で集中して学びたい」「本格的に仕事にしたい」と考えている方はまずは無料メンター相談から初めて見てはいかがでしょうか
↓気になる方は下記リンクを参照
まとめ
今回は、HTML/CSSにおいて、『画像（img要素）の上に文字を重ねる方法』を紹介させていただきました。
まとめ
- 画像に『position: relative』文字に『position: absolute』を指定する
皆さまの参考になれば幸いです。
コメント