[HTML/CSS]画像の上に文字を表示させたい

前提・実現したいこと

CSSで画像の上に文字を表示させたいです。

発生している問題・エラーメッセージ

調べて親要素に「position:relative」
子要素に「position: absolute」
と記載すれば良いことまでわかりましたが、うまく反映されず、
子要素のテキストが他のクラスに重なっている？状態です。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="jp">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <link rel="stylesheet" href="css/reset.css">
8  <link rel="stylesheet" href="css/style.css">
9
10  <title>デイトラ</title>
11</head>
12
13<body>
14
15  <div class="header">
16  <header>
17    <h1>30DAYSトライアル</h1>
18    <ul>
19      <li>デイトラとは</li>
20      <li>コース一覧</li>
21      <li>お問い合わせ</li>
22    </ul>
23  </header>
24</div>
25
26    <div class="info">
27      <img src="img/main-vsual-nontitle.png" alt="ヘッダー画像">
28      <div class="text">
29      <h1>1日1題30日で<br>プロのWebエンジニアになろう！</h1>
30      <p>毎日設定された課題をこなすだけ！
31        <br>未経験から30日でプログラミングスキルが身につきます。
32      </p>
33    </div>
34    </div>
35
36    <div class="main">
37      <h1>デイトラとは</h1>
38      <img src="img/about.png" alt="アバウト">
39      <p>デイトラとは、無料で、迷わず、楽しく学べるプログラミング学習アプリです。
40        毎日設定された課題をこなしていくだけで、
41        未経験から30日でプログラミングスキルが身につきます。
42        1日1題30日でプロのWebエンジニアを目指しましょう！</p>
43    </div>
44
45    <div class="course">
46      <h1>コース一覧</h1>
47      <img src="img/web_first.png" alt="初級">
48      <p>HTML / CSS / Bootstrap</p>
49      <img src="img/web_second.png" alt="中級">
50      <p>HTML / CSS / JavaScript / jQuery</p>
51      <img src="img/web_third.png" alt="上級">
52      <p>PHP / WordPress</p>
53    </div>
54
55    <div class="contact">
56      <h1>お問い合わせ</h1>
57      <p>さあ今日から30日間を始めよう！</p>
58      <input type="email" placeholder="メールアドレス">
59      <input type="submit" value="無料ではじめる">
60    </div>
61  </body>
62  <footer>
63    <p>Copyright(c) 2020 東京フリーランス ALL Rights Reserved.</p>
64  </footer>
65
66</html>

CSS
1body {
2  width: 100%;
3  margin-left: auto;
4  margin-right: auto;
5  background-color: antiquewhite;
6}
7
8header {
9  height: 48px;
10  text-align: center;
11  display: flex;
12  line-height: 48px;
13}
14header h1 {
15  font-size: 24px;
16  font-weight: bold;
17  padding-left: 10%;
18
19}
20header ul {
21  font-weight: bold;
22  margin-left: 35%;
23  display: flex;
24}
25header ul li {
26  padding-right: 45px;
27}
28
29.info {
30  position:relative
31}
32
33.text {
34  position: absolute;
35}
36
37.info img {
38  width: 100%;
39}

試したこと

親要素と子要素を見直したり、子要素にdivでクラス名をつけてみたりしましたが
解決せずでした。

お力を貸していただけると幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

absolute側にtop:30px;とかleft:0;とか入れてみて下さい。

投稿2020/12/13 06:31

tomtomtomtom

総合スコア563

neroS2eng

2020/12/13 06:42

できました！反映すれば画像の上に乗って表示されると思い込んでいたのですが textの位置を指定しなければいけなかったのですね・・・！大変助かりました、ありがとうございます！

tomtomtomtom

2020/12/13 07:17

ご解決おめでとうございます^^ また機会がありましたら宜しくお願い致します。

行動規範の内容に同意します

ヘッダー画像を背景画像としてその上にテキストを重ねて表示させたいという目的なら、img要素、position: absolute;は使わずに、ヘッダー画像をbackground-imageで表示させるのが簡単だと思います。

html
1  <div class="info">
2    <div class="text">
3      <h1>1日1題30日で<br>プロのWebエンジニアになろう！</h1>
4      <p>毎日設定された課題をこなすだけ！
5        <br>未経験から30日でプログラミングスキルが身につきます。
6      </p>
7    </div>
8  </div>

css
1.info {
2  background-image: url(img/main-vsual-nontitle.png);
3  background-size: cover;
4}

投稿2020/12/13 07:07

編集2020/12/13 07:13

hatena19

総合スコア33715

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！