More than 5 years have passed since last update.

link_to をクリック不可にするz-indexについて

Posted at 2019-07-17

現在自分はruby言語について学習しており、ポートフォリオ作成の道中で
link_to がクリックできない事態に遭遇したので、
今後の自分用にメモとして記録しておきます。

自分は
CSSプロパティにて
z-index(選択した要素を最前面や再背面に設定するもの）に
ー（マイナス）記号を用いていつも設定していたのですが
それだとlink_toで設定したリンクをクリックすることができなくなってしまいます。

home.html.erb

     <div class="hoge-index-items">
        <%= link_to("詳細", "/posts/#{post.id}") %>
      </div>

home.scss

     .hoge-index-items{
        z-index： -100;
       ~~０未満の値だと反応しない~~
      }

↓実行結果

z-index内の数字を正の数に変更すると、

home.scss

     .hoge-index-items{
        z-index： ２;
       ~~０以上の値だと反応するようになる~~
      }

↓実行結果

##まとめ
このことに気付くまでに丸二日ほど掛かってしまいました（笑）
自分の検索能力の無さを痛感しました。

上記のことは同様に HTML 内での aタグを含んだ設定をする際にも起こるようです。
（参考より）
###参考
aタグのリンクが反応しない