CSSのz-indexで下のリンクを有効にすることは可能でしょうか？

Question

z-indexの順番が影響して、思うような動きにできず困っております、もし可能でありましたらアドバイスをお願いいたします。

z-indexのお話になりますので、一番下（z-indexの0）に画像がありまして、そこにクリッカブルマップのリンク定義があります。
その上に、別の画像を配置して、リンクの指定を行ったMAP上に別の画像を配置しています。（なので、元のz-indexの0の画像上には画像が無く真っ白です）

分かりにくいのですが、大本の画像に対してのリンク指定が、画像へのMAP（z-indexの0）で定義され、その全く上に、画像（z-indexの1）を定義しています。（かなり特殊な方法だと思います）

ここで問題なのですが、一番下の画像のMAPのリンクを有効にしようと思うとz-indexの0の画像を前面に出さなければならず、そうすると、上に重なる画像にマウスオーバーのopacityが効きません。（元画像の下になるので）
上に重なる画像を有効にして最前面に配置すると、マウスオーバーは有効になりますが、今度はその下のMAP画像に定義したリンクが動いてくれません。（opacityはききますがリンクが無効になります）

こういった場合のz-indexを同じレベルで2つ動かすなどは無理なのでしょうか？
どうかアドバイスのほどよろしくお願いいたします。

Comments

[jun26]

文章のみだと少しわかりづらいので、
その状況のコードか画像を置いてくださるとありがたいです。

Answer 1

上に来るelementに対してpointer-events:none;をcssでセットすると、そのelementは、クリックがされなくなります。
結果的に、下にあるelementがクリックされますよ。
z-indexは、表示順番なので、上位に表示されて邪魔な場合に、よくこの方法をします。
動的に切り替えが必要であれば、タグの属性でpointer-eventsの発生を制限するといいかと思います。

Comments

[yukina00235]

有難うございます。
>>結果的に、下にあるelementがクリックされますよ。
とても参考になりました、他での使えそうなテクニックなので大変助かりました。