絶賛、ポートフォリオサイト作成中。
タップで読みたいところにジャンプします
リンクがうまく動かない！
リンクを押しても押しても反応しない！
なんで？
コードはあっているはずなのに！って言うお話。
状況は？
画像の上に色のついたマスクを疑似要素afterをつけて、その上にリンクをつけた要素を貼った。
z-indexを当てて体裁を整えた。
/// 誤った書き方
.Section-Contact {
position: relative;
z-index:-2;
background-image: url("../img/contact_bg.jpg");
background-size: cover;
background-position: bottom center;
&::after {
position: absolute;
top: 0;
left: 0;
z-index:-2;
content: "";
width: 100%;
height: 100%;
background-color: #0a4c58;
opacity: 0.8;
}
}原因は？
- 疑似要素「after」で「aタグのついた要素」が隠れる。
- 疑似要素「after」を「aタグのついた要素」より下に回そうと「z-index：-1」を指定。
- 「aタグのついた要素」が「main」の下に潜り込む。
- 無事に「aタグのついた要素」が使えなくなる（ちーん）。
ふわーっとコーディングしたらいけないんだなと再確認。
重なりが1つしかないのになぜに、afterを使ったのか？軽く問い詰めたい、自分を。
今回疑似要素の「after」を使わずに「before」を使っておけば、「z-index:-1」を使う必要もなく、aタグが使えないと時間を溶かすという事もなかったはず！
うーん、残念。
注意しておくこと
基本的に要素は後から書かれているものが上に重なっていく。
z-indexのデフォルトは「0」ではなく、「auto」。
z-indexを使うときは。
これからはむやみにz-indexを使わないようにしよう。
before要素、after要素を使う必要があってリンクを貼る場合があるときは、本体に「index:auto」を設定してみよう。
コメント