回答編集履歴
8
大幅改変2
answer
CHANGED
|
@@ -23,13 +23,10 @@
|
|
|
23
23
|
</body>
|
|
24
24
|
</html>
|
|
25
25
|
```
|
|
26
|
+
[↑デモンストレーション](https://jsfiddle.net/namnium1125/Lh6ugsh0/)
|
|
26
27
|
|
|
27
|
-
`opacity`を使わない場合は、jQueryを使ってなんとか`z-index: -1;`の要素のクリックを実現してみました
|
|
28
|
+
`opacity`を使わない場合は、jQueryを使ってなんとか`z-index: -1;`の要素のクリックを実現してみました。あまり意味は無いですが、cssを崩したくないならば有効かもしれません。
|
|
28
29
|
|
|
29
|
-
そもそも設計的に、`z-index`はそういったクリックを防止するためにあるのではないでしょうか?
|
|
30
|
-
|
|
31
|
-
できれば、`z-index`を使わない形をまず考えてみましょう。
|
|
32
|
-
|
|
33
30
|
```lang-html
|
|
34
31
|
<!doctype html>
|
|
35
32
|
<html>
|
|
@@ -84,5 +81,7 @@
|
|
|
84
81
|
</body>
|
|
85
82
|
</html>
|
|
86
83
|
```
|
|
87
|
-
デモンストレーション↓
|
|
88
|
-
[
|
|
84
|
+
[↑デモンストレーション](https://jsfiddle.net/namnium1125/d5tj1knf/)
|
|
85
|
+
|
|
86
|
+
ただ`z-index`を設定する目的にはクリックを防止すること等もあると考えられるので、
|
|
87
|
+
できれば、`z-index`を使わない形ですませる方がいいのかもしれません。
|
7
大幅編集
answer
CHANGED
|
@@ -1,7 +1,34 @@
|
|
|
1
|
+
親要素に[`opacity`](http://www.htmq.com/css3/opacity.shtml)を設定してもよいのでしたら、この値を`0.9`等に設定することでクリックすることができました。
|
|
2
|
+
|
|
3
|
+
```lang-html
|
|
4
|
+
<!doctype html>
|
|
5
|
+
<html>
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="utf-8">
|
|
8
|
+
<title>z-index_test</title>
|
|
9
|
+
<style>
|
|
10
|
+
#wrapper {
|
|
11
|
+
background-color: white;
|
|
12
|
+
opacity: 0.9;
|
|
13
|
+
}
|
|
14
|
+
.back {
|
|
15
|
+
z-index: -1;
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
18
|
+
</head>
|
|
19
|
+
<body>
|
|
20
|
+
<div id="wrapper">
|
|
21
|
+
<a href="./test.html" class="back">link</a>
|
|
22
|
+
</div>
|
|
23
|
+
</body>
|
|
24
|
+
</html>
|
|
25
|
+
```
|
|
26
|
+
|
|
1
|
-
`
|
|
27
|
+
`opacity`を使わない場合は、jQueryを使ってなんとか`z-index: -1;`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
|
|
28
|
+
|
|
2
29
|
そもそも設計的に、`z-index`はそういったクリックを防止するためにあるのではないでしょうか?
|
|
3
30
|
|
|
4
|
-
`z-index`を使わない形をまず考えてみましょう。
|
|
31
|
+
できれば、`z-index`を使わない形をまず考えてみましょう。
|
|
5
32
|
|
|
6
33
|
```lang-html
|
|
7
34
|
<!doctype html>
|
|
@@ -36,8 +63,6 @@
|
|
|
36
63
|
left: 0px;
|
|
37
64
|
width: 500px;
|
|
38
65
|
height: 500px;
|
|
39
|
-
background-color: skyblue;
|
|
40
|
-
opacity: 0.3;
|
|
41
66
|
}
|
|
42
67
|
#link {
|
|
43
68
|
position: absolute;
|
6
同じく;の追加。。本当にたびたびすみません。。
answer
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
25
|
});
|
|
26
|
-
})
|
|
26
|
+
});
|
|
27
27
|
</script>
|
|
28
28
|
<style>
|
|
29
29
|
.back {
|
5
;の追加、何度も編集してすみません。。
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
`jQuery`を使ってなんとか`z-index: -1`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
|
|
1
|
+
`jQuery`を使ってなんとか`z-index: -1;`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
|
|
2
2
|
そもそも設計的に、`z-index`はそういったクリックを防止するためにあるのではないでしょうか?
|
|
3
3
|
|
|
4
4
|
`z-index`を使わない形をまず考えてみましょう。
|
4
文言の若干の編集
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
`jQuery`を使ってなんとか実現してみましたけど、私も実用的ではないと思います。
|
|
1
|
+
`jQuery`を使ってなんとか`z-index: -1`の要素のクリックを実現してみましたけど、私も実用的ではないと思います。
|
|
2
2
|
そもそも設計的に、`z-index`はそういったクリックを防止するためにあるのではないでしょうか?
|
|
3
3
|
|
|
4
4
|
`z-index`を使わない形をまず考えてみましょう。
|
3
追記
answer
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
`jQuery`を使ってなんとか実現してみましたけど、私も実用的ではないと思います。
|
|
1
|
+
`jQuery`を使ってなんとか実現してみましたけど、私も実用的ではないと思います。
|
|
2
|
+
そもそも設計的に、`z-index`はそういったクリックを防止するためにあるのではないでしょうか?
|
|
2
3
|
|
|
4
|
+
`z-index`を使わない形をまず考えてみましょう。
|
|
5
|
+
|
|
3
6
|
```lang-html
|
|
4
7
|
<!doctype html>
|
|
5
8
|
<html>
|
2
ちょっとしたコードの編集
answer
CHANGED
|
@@ -33,6 +33,8 @@
|
|
|
33
33
|
left: 0px;
|
|
34
34
|
width: 500px;
|
|
35
35
|
height: 500px;
|
|
36
|
+
background-color: skyblue;
|
|
37
|
+
opacity: 0.3;
|
|
36
38
|
}
|
|
37
39
|
#link {
|
|
38
40
|
position: absolute;
|
1
デモの追加
answer
CHANGED
|
@@ -53,4 +53,6 @@
|
|
|
53
53
|
</div>
|
|
54
54
|
</body>
|
|
55
55
|
</html>
|
|
56
|
-
```
|
|
56
|
+
```
|
|
57
|
+
デモンストレーション↓
|
|
58
|
+
[click_z-index-1_elem](https://jsfiddle.net/namnium1125/d5tj1knf/)
|