aタグが背景に埋もれて反応しない

前提・実現したいこと

こんにちは、プログラミング初学者の者です。
模写コーディングをしているのですが、aタグが反応しなくなってしまいました。
模写コーディングしようとしているページ

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

模写コーディング先のサービスの特徴の部分の詳しく知ろうのaタグが反応しない。

html
1<section id="service-background" class="service">
2        <div class="common-inner">
3            <h2 class="section-title">サービスの特徴</h2>
4            <div class="service-inner">
5                <div class="service-block">
6                    <div class="service-block__container">
7                        <p class="service-text">テキストテキストテキスト</p>
8                        <ul class="service-img__list">
9                            <li>
10                                <img src="C:\Users\KROWL-coding-subject-003-Windows\images/icon-auto_reporting.png" alt="">
11                            </li>
12
13                            <li>
14                                <img src="" alt="">
15                            </li>
16
17                            <li>
18                                <img src="" alt="">
19                            </li>
20
21                            <li id=service-icon>
22                                <img src="" alt="">
23                            </li>
24
25                            <li>
26                                <img src="" alt="">
27                            </li>
28
29                            <li>
30                                <img src="" alt="">
31                            </li>
32                        </ul>
33                    </div>
34                    <p class="btn service-btn"><a href="#">機能について詳しく知る</a></p>                       
35                </div>
36            </div>
37        </div>
38    </section>

css
1.common-inner{
2    padding: 100px 0;
3    margin: 0 auto;
4    font-size: 1.7rem;
5    
6  }
7
8   #service-background{
9    background-color: powderblue;
10    position: relative;
11    z-index: -2;
12  }
13
14.service-inner{
15  background-color: white;
16  padding: 5%;
17  width: 75%;
18  margin: 0 auto;
19  
20}
21
22.service-block{
23  width: 100%;
24  text-align: center;
25
26}
27
28.service-block__container{
29  display: flex;
30  
31}
32
33.service-text{
34  width: 50%;
35  text-align: left;
36  
37}
38
39.service-img__list{
40  width: 50%;
41  display: flex;
42  flex-wrap: wrap;
43  margin-left: 40px;
44}
45
46.service-img__list li:not(:last-child){
47  margin-right: 50px;
48}
49
50#service-icon{
51  margin-left: 40px;
52}
53
54.btn a{
55  position: relative;
56  
57}

試したこと

色々試しているうちに背景にaタグが埋もれてしまっていることがわかりました。
aタグにrelativeを指定したがだめだった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

css
1   #service-background{
2    background-color: powderblue;
3    position: relative;
4    z-index: -2;
5  }

…のz-index:-2;という記述を削除すればリンクをクリックできます。
z-indexというのは要素の重なり順を制御するもので、数字が小さければ小さいほど手前に表示されます。
このため、<section id="service-background" class="service">が他の要素よりも手前に表示されてしまい、リンクをクリックしているつもりでも<section id="service-background" class="service">の上をクリックしている状態になってしまっていたわけです。

０を基準に数字が大きければ大きいほど手前に表示されます。（すいません、小さければ小さいほどと勘違いしていました。）...なので、うーん、どうしてz-index:-2;で手前に表示されてしまっているのか分かりませんが、とにかくz-index:-2;を削除したらリンクをクリックできるようになりました。

#service-backgroundのz-indexを-2にしたままでbodyにposition:relative;とz-index:-3;を記述してもクリックできるようになるので、ひょっとしたら#service-backgroundが手前に表示されているのではなく、ボックスごとbodyよりも奥に表示されている可能性もある気がします。ただ、bodyにbackground-colorを付けても#service-backgroundのボックスがbodyの後ろに隠れないのでちょっと自分でも分かりません。

最初に勘違いで答えてしまったため中途半端な回答になってしまい申し訳ありません。
引き続き原因を調べてみます。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
分かりました。

やはり<section id="service-background" class="service">のボックス自体がz-index:-2;によりbodyよりも奥に表示されているようです。

bodyにbackground-colorを設定しても<section id="service-background" class="service">がbodyの裏に隠れないので、一見するとbodyの方が手前に表示されているようには見えませんが、bodyとhtmlの両方にbackground-colorを設定してみると、今度はbodyの背景色の後ろに<section id="service-background" class="service">が隠れ、bodyが手前に表示されているのが分かります。

詳しくは以下のリンク先を見ていただけるとよろしいかと思います。
英語なので私も翻訳をかけて何となく理解できたという程度ですが...。

Why doesn't the z-index style apply to the <body> element?

投稿2020/03/05 12:50

編集2020/03/06 06:16