回答編集履歴
3
bodyが手前に表示されている事が分かりました。
test
CHANGED
|
@@ -31,3 +31,29 @@
|
|
|
31
31
|
最初に勘違いで答えてしまったため中途半端な回答になってしまい申し訳ありません。
|
|
32
32
|
|
|
33
33
|
引き続き原因を調べてみます。
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
|
|
38
|
+
|
|
39
|
+
分かりました。
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
やはり<section id="service-background" class="service">のボックス自体がz-index:-2;によりbodyよりも奥に表示されているようです。
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
bodyにbackground-colorを設定しても<section id="service-background" class="service">がbodyの裏に隠れないので、一見するとbodyの方が手前に表示されているようには見えませんが、bodyとhtmlの両方にbackground-colorを設定してみると、今度はbodyの背景色の後ろに<section id="service-background" class="service">が隠れ、bodyが手前に表示されているのが分かります。
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
詳しくは以下のリンク先を見ていただけるとよろしいかと思います。
|
|
52
|
+
|
|
53
|
+
英語なので私も翻訳をかけて何となく理解できたという程度ですが...。
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
[Why doesn't the z-index style apply to the <body> element?
|
|
58
|
+
|
|
59
|
+
](https://stackoverflow.com/questions/32109258/why-doesnt-the-z-index-style-apply-to-the-body-element)
|
2
bodyより奥に表示されている可能性も感じたので追記
test
CHANGED
|
@@ -24,4 +24,10 @@
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
+
#service-backgroundのz-indexを-2にしたままでbodyにposition:relative;とz-index:-3;を記述してもクリックできるようになるので、ひょっとしたら#service-backgroundが手前に表示されているのではなく、ボックスごとbodyよりも奥に表示されている可能性もある気がします。ただ、bodyにbackground-colorを付けても#service-backgroundのボックスがbodyの後ろに隠れないのでちょっと自分でも分かりません。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
最初に勘違いで答えてしまったため中途半端な回答になってしまい申し訳ありません。
|
|
32
|
+
|
|
27
33
|
引き続き原因を調べてみます。
|
1
勘違いがあったので修正しました。
test
CHANGED
|
@@ -14,10 +14,14 @@
|
|
|
14
14
|
|
|
15
15
|
…のz-index:-2;という記述を削除すればリンクをクリックできます。
|
|
16
16
|
|
|
17
|
-
z-indexというのは要素の重なり順を制御するもので、数字が小さければ小さいほど手前に表示されます。
|
|
17
|
+
z-indexというのは要素の重なり順を制御するもので、~~数字が小さければ小さいほど手前に表示されます。
|
|
18
18
|
|
|
19
|
-
このため、<section id="service-background" class="service">が他の要素よりも手前に表示されてしまい、リンクをクリックしているつもりでも<section id="service-background" class="service">の上をクリックしている状態になってしまっていたわけです。
|
|
19
|
+
このため、<section id="service-background" class="service">が他の要素よりも手前に表示されてしまい、リンクをクリックしているつもりでも<section id="service-background" class="service">の上をクリックしている状態になってしまっていたわけです。~~
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
な
|
|
23
|
+
０を基準に数字が大きければ大きいほど手前に表示されます。（すいません、小さければ小さいほどと勘違いしていました。）...なので、うーん、どうしてz-index:-2;で手前に表示されてしまっているのか分かりませんが、とにかくz-index:-2;を削除したらリンクをクリックできるようになりました。
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
引き続き原因を調べてみます。
|