position: relativeが実行されていない

前提・実現したいこと

ProgateのHTML&CSS中級クラス道場編のプログラムについてです。
画像の左上部分を基準としてposition:relativeとposition:absoluteを使って画像上に文字を表示するプログラムを作成した所、基準点がどうしてもページの左上の部分に来てしまい正確な位置に文字が表示されません。

目標

実際に発生したエラー

該当のソースコード

該当部分のみ抜粋します。

HTML
1  <!--lessonの部分-->
2  <div class="lessons">
3    <div class="container">
4      <h1>Learn Where to Get Started!</h1>
5      <div class="lesson">
6        <img src="https://prog-8.com/images/html/advanced/html.png">
7        <h2>HTML & CSS</h2>
8        <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
9      </div>
10      <div class="lesson">
11        <img src="https://prog-8.com/images/html/advanced/jQuery.png">
12        <h2>jQuery</h2>
13        <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
14      </div>
15      <div class="lesson">
16        <img src="https://prog-8.com/images/html/advanced/ruby.png">
17        <h2>Ruby</h2>
18        <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
19      </div>
20      <div class="lesson">
21        <img src="https://prog-8.com/images/html/advanced/php.png">
22        <h2>PHP</h2>
23        <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
24      </div>      
25    </div>
26  </div>

CSS
1.lessons {
2  margin-right: auto;
3  margin-left: auto;
4  height: 580px;
5  color: #f7f7f7;
6  text-align: center;
7}
8.lessons h1 {
9  color: #5f5d60;
10  margin-top: 80px;
11  margin-bottom: 50px;
12  font-weight: normal;
13}
14.lesson {
15  width: 25%;
16  float: left;
17}
18.lesson img {
19  position: relative;
20  display: inline-block;
21}
22.lesson h2 {
23  display: inline-block;
24  position: absolute;
25  color: black;
26  top: 44%;
27  width: 100%;
28  font-size: 20px;
29}
30.lesson p {
31  width: 80%;
32  margin-top: 15px;
33  color: #b3aeb5;
34  display: inline-block;
35}

###試したこと
解答のhtmlフォルダのソースコードを確認した所lessonクラスのh2部分に

 top: 44%;
 width: 100%;

のプログラムがあったためこのコードをそのまま張り付けた所文字がページのサイズ自体が変わってしまった。

###全体のソースコード
該当箇所は<div class="lessons">の部分ですが該当部分以外がエラーの原因になっている可能性があるので念のために全てのソースコードを表示します。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" type="text/css" href="stylesheet.css">
7  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
8</head>
9<body>
10  <header>
11    <div class="container">
12    <img src="https://prog-8.com/images/html/advanced/main_logo.png">
13    <a href="#">ログイン</a></div>
14  </header>
15  
16  <!--パソコンの写真の写っているところ（最初の部分）-->
17  <div class="top">
18    <div class="container">
19     <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
20     <p>Progateはオンラインプログラミング学習サービスです。<br>
21     初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながら
22     プログラミングを学んでいきましょう。</p>
23     <a href="#" class="signup">新規登録はこちら</a>
24     <p>or</p>
25     <a href="#" class="facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
26     <a href="#" class="twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
27    </div>
28  </div>
29  <!--lessonの部分-->
30  <div class="lessons">
31    <div class="container">
32      <h1>Learn Where to Get Started!</h1>
33      <div class="lesson">
34        <img src="https://prog-8.com/images/html/advanced/html.png">
35        <h2>HTML & CSS</h2>
36        <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
37      </div>
38      <div class="lesson">
39        <img src="https://prog-8.com/images/html/advanced/jQuery.png">
40        <h2>jQuery</h2>
41        <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
42      </div>
43      <div class="lesson">
44        <img src="https://prog-8.com/images/html/advanced/ruby.png">
45        <h2>Ruby</h2>
46        <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
47      </div>
48      <div class="lesson">
49        <img src="https://prog-8.com/images/html/advanced/php.png">
50        <h2>PHP</h2>
51        <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
52      </div>      
53    </div>
54  </div>
55</body>
56</html>

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22.container {
23  width: 1170px;
24  padding: 0 15px;
25  margin: 0 auto;
26}
27
28header{  
29  height: 65px;
30  width: 100%;
31  background-color: rgba(34, 49, 52, 0.9);
32  position :fixed;
33  top: 0;
34  z-index: 10;
35}
36header img{
37  width: 124px;
38  margin: 20px auto;}
39header a {
40  color: white;
41  float: right;
42  background-color: rgba(255,255,255,0.3);
43  padding: 20px 25px 20px 25px;
44}
45
46.top {
47  background-image: url(https://prog-8.com/images/html/advanced/top.png);
48  background-size: cover;
49  padding-top: 180px;
50  padding-bottom: 100px;
51  text-align: center;
52  color: white;
53}
54.top h1 {
55  opacity: 0.7;
56  font-size: 45px;
57  letter-spacing: 5px;
58}
59.top p {
60  opacity: 0.7;
61}
62.top a{
63  color:white;
64  opacity: 0.8;
65  padding: 8px 24px;
66  border-radius: 4px;
67  display:inline-block;
68}
69.top a:hover {
70  opacity: 1.0;
71}
72.signup {
73  background-color:#239b76;
74  margin-top: 30px;
75  margin-bottom: 15px;
76}
77.fa {
78  margin-right: 5px;
79}
80.facebook {
81  background-color:#3b5998;
82  margin-top: 15px;
83  margin-right: 10px;
84}
85.twitter {
86  background-color:#55acee;
87  margin-top: 15px;
88}
89.lessons {
90  margin-right: auto;
91  margin-left: auto;
92  height: 580px;
93  color: #f7f7f7;
94  text-align: center;
95}
96.lessons h1 {
97  color: #5f5d60;
98  margin-top: 80px;
99  margin-bottom: 50px;
100  font-weight: normal;
101}
102.lesson {
103  width: 25%;
104  float: left;
105}
106.lesson img {
107  position: relative;
108  display: inline-block;
109}
110.lesson h2 {
111  display: inline-block;
112  position: absolute;
113  color: black;
114  top: 44%;
115  width: 100%;
116  font-size: 20px;
117}
118.lesson p {
119  width: 80%;
120  margin-top: 15px;
121  color: #b3aeb5;
122  display: inline-block;
123}

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

回答2件

Flexで書けばpositionなんぞ使わずにど真ん中に配置できますが…
それでも、今のままでは書き方がおかしいです。

position:absolute;はposition:relative;の子要素としないと、
基準が分からなくなるので、正確な場所に配置は出来ません。なので、

HTML
1<div class="lesson">
2  <h2><img><span>HTML &amp; CSS</span></h2>
3  <p></p>
4</div>

と<h2>を親、<span>を子として記述。(別に<strong>やら<em>などでもOK)

CSS
1.lesson h2 {
2  position:relative;
3}
4.lesson h2 img {
5  z-index:1;
6}
7.lesson h2 span {
8  z-index:10;
9  position:absolute;
10}

という感じでいけるはずです。

投稿2019/05/30 18:44

LibertyBell3

総合スコア1084

yuusukk

2019/06/02 06:47

解答を拝見させていただき参考になる部分がありました。解答有難うございました。

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

ベストアンサー

css
1.lesson h2 {
2  display: inline-block;
3  position: absolute;
4  color: black;
5  top: 44%;
6  width: 100%;
7  font-size: 20px;
8}

を

css
1.lesson h2 {
2  position: absolute;
3  color: black;
4  top: 44%;
5  width: 100%;
6  font-size: 20px;
7}

にしてみたらいかがでしょうか？
inline blockが邪魔している気がします。
また、lessonクラスの中にもう一つposition=relativeを与えた要素が必要かもしれないです。

一応私が以前Progateをやっていた時のコードを貼っておきます。
何か比較して参考になれば幸いです。（見本のコードがPタグだったので、H2タグではなくPタグを使用しています）

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" type="text/css" href="stylesheet.css">
7  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
8</head>
9<body>
10  <header>
11    <div class="container">
12      <div class="header-left">
13        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
14      </div>
15      <div class="header-right">
16        <a href="#" class="login">ログイン</a>
17      </div>
18    </div>
19  </header>
20  <div class="top-wrapper">
21    <div class="container">
22      <h1>LEARN TO CODE.</h1>
23      <h1>LEARN TO BE CREATIVE.</h1>
24      <p>Progateはオンラインプログラミング学習サービスです。</p>
25      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
26      <div class="btn-wrapper">
27        <a href="#" class="btn signup">新規登録はこちら</a>
28        <p>or sign up with</p>
29        <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
30        <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
31      </div>
32    </div>
33  </div>
34  <div class="lesson-wrapper">
35    <div class="container">
36      <div class="heading">
37        <h2>Learn Where to Get Started!</h2>
38      </div>
39      <div class="lessons">
40        <div class="lesson">
41          <div class="lesson-icon">
42            <img src="https://prog-8.com/images/html/advanced/html.png">
43            <p>HTML & CSS</p>
44          </div>
45          <p class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
46        </div>
47        <div class="lesson">
48          <div class="lesson-icon">
49            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
50            <p>jQuery</p>
51          </div>
52          <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
53        </div>
54        <div class="lesson">
55          <div class="lesson-icon">
56            <img src="https://prog-8.com/images/html/advanced/ruby.png">
57            <p>Ruby</p>
58          </div>
59          <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
60        </div>
61        <div class="lesson">
62          <div class="lesson-icon">
63            <img src="https://prog-8.com/images/html/advanced/php.png">
64            <p>PHP</p>
65          </div>
66          <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
67        </div>
68      </div>
69    </div>
70  </div>
71  <div class="message-wrapper">
72    <div class="container">
73      <div class="heading">
74        <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
75        <h3>Let's learn to code, learn to be creative!</h3>
76      </div>
77      <span class="btn message">さっそく開発する</span>
78    </div>
79  </div>
80  <footer>
81    <div class="container">
82      <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
83      <p>Learn to Code,Learn to be Creative.</p>
84    </div>
85  </footer>
86</body>
87</html>

css
1body {
2  margin: 0;
3}
4
5a {
6  text-decoration: none;
7}
8
9.top-wrapper {
10  padding: 180px 0 100px 0;
11  background-image: url(https://prog-8.com/images/html/advanced/top.png);
12  background-size: cover;
13  color: white;
14  text-align: center;
15}
16
17.container {
18  width: 1170px;
19  padding: 0 15px;
20  margin: 0 auto;
21}
22
23.top-wrapper h1 {
24  opacity: 0.7;
25  font-size: 45px;
26  letter-spacing: 5px;
27}
28
29.top-wrapper p {
30  opacity: 0.7;
31  font-size: 14px;
32}
33
34.btn-wrapper {
35  margin: 20px 0;
36}
37
38.btn-wrapper p {
39  margin: 10px 0;
40}
41
42.signup {
43  background-color: #239b76;
44}
45
46.facebook {
47  background-color: #3b5998;
48  margin-right: 10px;
49}
50
51.twitter {
52  background-color: #55acee;
53}
54
55.btn {
56  padding: 8px 24px;
57  color: white;
58  display: inline-block;
59  opacity: 0.8;
60  border-radius: 4px;
61}
62
63.btn:hover {
64  opacity: 1;
65}
66
67.fa {
68  margin-right: 5px;
69}
70
71header {
72  height: 65px;
73  width: 100%;
74  background-color: rgba(34,49,52,0.9);
75  /*positionプロパティをfixedに、topを0に指定してください*/
76  position: fixed;
77  top: 0;
78  
79  /*z-indexを10に指定してください*/
80  z-index: 10;
81  
82}
83
84.logo {
85  width: 124px;
86  margin-top: 20px;
87}
88
89.header-left {
90  float: left;
91}
92
93.header-right {
94  float: right;
95  background-color: rgba(255,255,255,0.3);
96  transition: all 0.5s;
97}
98
99.header-right:hover {
100  background-color: rgba(255,255,255,0.5);
101}
102
103.header-right a {
104  line-height: 65px;
105  padding: 0 25px;
106  color: white;
107  display: block;
108}
109
110.lesson-wrapper {
111  height: 500px;
112  padding-bottom: 80px;
113  background-color: #f7f7f7;
114  text-align: center;
115}
116
117.heading {
118  padding-top: 60px;
119  padding-bottom: 30px;
120  color: #5f5d60;
121}
122
123.heading h2 {
124  font-weight: normal;
125}
126
127.lesson {
128  float: left;
129  width: 25%;
130}
131
132.lesson-icon {
133  position: relative;
134}
135
136.lesson-icon p {
137  position: absolute;
138  top: 90px;
139  width: 100%;
140  color: white;
141}
142
143.txt-contents {
144  width: 80%;
145  display: inline-block;
146  margin-top: 20px;
147  font-size: 12px;
148  color: #b3aeb5;
149}
150
151.heading h3 {
152  font-weight: normal;
153}
154
155.message-wrapper {
156  border-bottom: 1px solid #eee;
157  padding-bottom: 80px;
158  text-align: center;
159}
160
161.message {
162  padding: 15px 40px;
163  background-color: #5dca88;
164  cursor: pointer;
165  box-shadow: 0px 7px #1a7940;
166}
167
168.message:active {
169  position: relative;
170  top: 7px;
171  box-shadow: none;
172}
173
174footer img {
175  width: 125px;
176}
177
178footer p {
179  color: #b3aeb5;
180  font-size: 12px;
181}
182
183footer {
184  padding-top: 30px;
185}