WordPressのカスタマイズをしていると、テーマにもともとついてるヘッダースライダー機能の上にボタンを設置したり、バナーを設置したりすることがあります。
ていうか毎回そういうことをしてます。
で、そういうことをしてると、たびたび直面する「リンク貼ってるのにクリックできない問題」。
このように、ちゃんとリンクを貼るためのタグを書いてるのに、リンクが機能しないのです。
リンクを貼ってるのをテキストから画像にしてみても、divから出してみても、どうしてもだめなので必死で調べました。
スライダーなどを設置するためのphpのなにかが邪魔してるのかな？
もしそうだとしたらお手上げです。
しかし、teratailでこのような質問を見つけました。
https://teratail.com/questions/103884
「リンクをクリックできない！」
このように位置を指定した時にそういう現象が発生することには気付いてました。
位置を指定するとき、必ずCSSでその要素にposition:absolute;という関数を書きます。
どうしたらいいのか全くわからなかった私にとって、この質問の回答は目からウロコでした。
どうやらposition:absolute;を書くと、中に入ってるaが覆われてしまってリンクが消えるみたいなんです。
だからcssにこう書きました。
.top-text3 a {
position: relative;
}
そしたら、ちゃんとリンクが出た！！
一瞬だけ！！ｗ
はい。一瞬出てまた消えました。シャボン玉のように・・・
これはもうこのリンクを貼ってる要素の上に別の要素が重なっていて邪魔をしているとしか考えられない。
というわけで、リンクを貼ってる要素を入れてるdivにz-index:100;
と付けてみました。
要素を最前面に出すための関数です。
すると、やっとリンクの指マークが出たのです！！
ちなみにz-indexはpositionと一緒じゃないとダメな関数。
今回、positionを書いてたのでz-indexも働いてくれました。
cssを書いておくと
.bnr{
position: absolute;
top:10%;
z-index:100;
}
.bnr a {
position: relative !important;
}
めでたしめでたし！！