Q&A
前提・実現したいこと
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件
0
ベストアンサー
absolute側にtop:30px;とかleft:0;とか入れてみて下さい。
投稿2020/12/13 06:31
総合スコア563
0
ヘッダー画像を背景画像としてその上にテキストを重ねて表示させたいという目的なら、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
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/13 06:42
2020/12/13 07:17