回答編集履歴

8

大幅改変2

2017/09/28 11:10

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -48,17 +48,11 @@
48
48
 
49
49
  ```
50
50
 
51
-
52
-
53
- `opacity`を使わない場合は、jQueryを使ってなんとか`z-index: -1;`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
51
+ [↑デモンストレーション](https://jsfiddle.net/namnium1125/Lh6ugsh0/)
54
52
 
55
53
 
56
54
 
57
- そもそも設計的に、`z-index`はそういったクリックを防止するめにるのでいでしょう?
55
+ `opacity`を使わない場合はjQueryを使ってなんとか`z-index: -1;`の要素のクリックを実現してみましまり意味いですが、cssを崩たくないならば有効もしれません。
58
-
59
-
60
-
61
- できれば、`z-index`を使わない形をまず考えてみましょう。
62
56
 
63
57
 
64
58
 
@@ -170,6 +164,10 @@
170
164
 
171
165
  ```
172
166
 
173
- デモンストレーション
167
+ [↑デモンストレーション](https://jsfiddle.net/namnium1125/d5tj1knf/)
174
168
 
169
+
170
+
175
- [click_z-index-1_elem](https://jsfiddle.net/namnium1125/d5tj1knf/)
171
+ ただ`z-index`を設定する目的にはクリックを防止すること等もあると考えられるので、
172
+
173
+ できれば、`z-index`を使わない形ですませる方がいいのかもしれません。

7

大幅編集

2017/09/28 11:10

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -1,10 +1,64 @@
1
+ 親要素に[`opacity`](http://www.htmq.com/css3/opacity.shtml)を設定してもよいのでしたら、この値を`0.9`等に設定することでクリックすることができました。
2
+
3
+
4
+
5
+ ```lang-html
6
+
7
+ <!doctype html>
8
+
9
+ <html>
10
+
11
+ <head>
12
+
13
+ <meta charset="utf-8">
14
+
15
+ <title>z-index_test</title>
16
+
17
+ <style>
18
+
19
+ #wrapper {
20
+
21
+ background-color: white;
22
+
23
+ opacity: 0.9;
24
+
25
+ }
26
+
27
+ .back {
28
+
29
+ z-index: -1;
30
+
31
+ }
32
+
33
+ </style>
34
+
35
+ </head>
36
+
37
+ <body>
38
+
39
+ <div id="wrapper">
40
+
41
+ <a href="./test.html" class="back">link</a>
42
+
43
+ </div>
44
+
45
+ </body>
46
+
47
+ </html>
48
+
49
+ ```
50
+
51
+
52
+
1
- `jQuery`を使ってなんとか`z-index: -1;`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
53
+ `opacity`を使わない場合は、jQueryを使ってなんとか`z-index: -1;`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
54
+
55
+
2
56
 
3
57
  そもそも設計的に、`z-index`はそういったクリックを防止するためにあるのではないでしょうか?
4
58
 
5
59
 
6
60
 
7
- `z-index`を使わない形をまず考えてみましょう。
61
+ できれば、`z-index`を使わない形をまず考えてみましょう。
8
62
 
9
63
 
10
64
 
@@ -74,10 +128,6 @@
74
128
 
75
129
  height: 500px;
76
130
 
77
- background-color: skyblue;
78
-
79
- opacity: 0.3;
80
-
81
131
  }
82
132
 
83
133
  #link {

6

同じく;の追加。。本当にたびたびすみません。。

2017/09/28 11:01

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  });
50
50
 
51
- })
51
+ });
52
52
 
53
53
  </script>
54
54
 

5

;の追加、何度も編集してすみません。。

2017/09/28 10:11

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -1,4 +1,4 @@
1
- `jQuery`を使ってなんとか`z-index: -1`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
1
+ `jQuery`を使ってなんとか`z-index: -1;`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
2
2
 
3
3
  そもそも設計的に、`z-index`はそういったクリックを防止するためにあるのではないでしょうか?
4
4
 

4

文言の若干の編集

2017/09/28 10:10

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -1,4 +1,4 @@
1
- `jQuery`を使ってなんとか実現してみましたけど、私も実用的ではないと思います。
1
+ `jQuery`を使ってなんとか`z-index: -1`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
2
2
 
3
3
  そもそも設計的に、`z-index`はそういったクリックを防止するためにあるのではないでしょうか?
4
4
 

3

追記

2017/09/28 10:09

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -1,4 +1,10 @@
1
- `jQuery`を使ってなんとか実現してみましたけど、私も実用的ではないと思います。`z-index`を使わない形をまず考えてみましょう。
1
+ `jQuery`を使ってなんとか実現してみましたけど、私も実用的ではないと思います。
2
+
3
+ そもそも設計的に、`z-index`はそういったクリックを防止するためにあるのではないでしょうか?
4
+
5
+
6
+
7
+ `z-index`を使わない形をまず考えてみましょう。
2
8
 
3
9
 
4
10
 

2

ちょっとしたコードの編集

2017/09/28 10:06

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -68,6 +68,10 @@
68
68
 
69
69
  height: 500px;
70
70
 
71
+ background-color: skyblue;
72
+
73
+ opacity: 0.3;
74
+
71
75
  }
72
76
 
73
77
  #link {

1

デモの追加

2017/09/28 10:04

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -109,3 +109,7 @@
109
109
  </html>
110
110
 
111
111
  ```
112
+
113
+ デモンストレーション↓
114
+
115
+ [click_z-index-1_elem](https://jsfiddle.net/namnium1125/d5tj1knf/)