z-indexで-1に指定したテーブルのクリックイベント

Question

<div class="Fake">
    <table class="Data">
      <tr>
         <td>Click</td>
      </tr>
    </table>
</div>

.Fake {
   z-index: 3;
}
.Data {
   z-index: -1;
}

$(document).on("click",".Data td",function() {
      alert("ENTER");
})

このときに、アラートがでると思ったのですがでませんでした。
なにかいい方法はありますでしょうか。

場所URL
http://yuyans0802.php.xdomain.jp/TEST/yume/tirashi_kakaku.php

Comments

[Lhankor_Mhy]

試してみたところアラートが出ました……

[TaruOrder]

修正依頼ありがとうございます！

http://yuyans0802.php.xdomain.jp/TEST/yume/tirashi_kakaku.php
このURLの場所の価格表の部分です。ほかに原因があるのでしょうか...

[think49]

そもそも、.Fake を上にかぶせる理由があるのでしょうか。.Fake を上にかぶせなくて済む実装をする方法を考える方が良いように思います。

Answer 1

Google Chrome で試しましたが動作します。
まずpositionが指定されていないのでz-indexは無視されます。
何もスタイル設定されていない通常のテーブルと同じなので、特に工夫しなくてもクリックできます。

position に関しては質問用に抜粋したコードから抜け落ちただけかもしれません。
ではpositionを設定した場合はどうかというと、z-indexがあっても親要素より後ろには重ならないので結局クリックできます。

遭遇している状況がご質問内容から再現できません。

しかしとにかく、一番手前にある要素しかクリックはできません。
background: transparent で後ろが透けていようと、ガラスのようにしっかりと存在するのでその後ろに隠れた要素をクリックすることはできません。

Comments

[TaruOrder]

解答ありがとうございます！
すみません！z-index以外のプロパティを書いていませんでした！position指定はしております...
どんな手を使っても、クリックをすることはできないというこでしょうか？

[tozjp]

マイナス z-index が影響しているっぽいですね。
最小値は0で指定してみてください。

今回のような事例もそうですし、間にもう一枚あとから挟むこともあるかもしれません。
z-index は0,1,2と詰めて設定せずに、10ステップ刻みとか余裕を持てるようにしておいたほうがいいですよ。