cssでz-indexの値を-1にした時にリンククリックできない

cssでz-indexを-1にした時、選択及びリンクがクリックできない現象に悩まされています。

-値にした時にこの現象を防ぐのは不可能なのでしょうか？

いい方法などございましたら、ご教授お願いいたします。

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

回答2件

親要素よりマイナスになってしまうので、親要素(body)からマイナスにしなければいけないので、あまり現実的ではないと思います……

投稿2017/09/28 09:16

yutaIMD

総合スコア60

ベストアンサー

親要素にopacityを設定してもよいのでしたら、この値を0.9等に設定することでクリックすることができました。

lang
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>z-index_test</title>
6<style>
7#wrapper {
8  background-color: white;
9  opacity: 0.9;
10}
11.back {
12  z-index: -1;
13}
14</style>
15</head>
16<body>
17<div id="wrapper">
18  <a href="./test.html" class="back">link</a>
19</div>
20</body>
21</html>

↑デモンストレーション

opacityを使わない場合は、jQueryを使ってなんとかz-index: -1;の要素のクリックを実現してみました。あまり意味は無いですが、cssを崩したくないならば有効かもしれません。

lang
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>z-index_-1</title>
6<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
7<script>
8$(function(){
9  var wrapper = $("#wrapper");
10  var children = wrapper.children();
11
12  wrapper.on("click",function(e){
13    children.each(function(ind,elem){
14      var pos = $(elem).position();
15      if((pos.top <= e.offsetY && e.offsetY <= (pos.top+$(elem).height())) && (pos.left <= e.offsetX && e.offsetX <= (pos.left+$(elem).width()))){
16        elem.click();
17      }
18    });
19  });
20});
21</script>
22<style>
23.back {
24  z-index: -1;
25}
26
27#wrapper {
28  position: absolute;
29  top: 0px;
30  left: 0px;
31  width: 500px;
32  height: 500px;
33}
34#link {
35  position: absolute;
36  top: 10px;
37  left: 10px;
38}
39#button {
40  position: absolute;
41  top: 50px;
42  left: 10px;
43}
44</style>
45</head>
46<body>
47<div id="wrapper">
48  <a href="./test.html" class="back" id="link">link</a>
49  <button onclick="alert('buttonClicked');" class="back" id="button">button</button>
50</div>
51</body>
52</html>