htmlのaタグが反応しません。原因と解決方法を教えて下さい。

Question

前提・実現したいこと

下記コードの該当aタグでクリックしても反応しません。別のaタグはクリックできます。
原因と解決方法が分かる方教えて下さい。よろしくお願いします。

※Chromeデベロッパー・ツールからはクリックしてリンク先にアクセス出来ました。
文法コードチェッカーでも問題ありませんでした。

発生している問題・エラーメッセージ

下記htmlコードのp要素「class="p_one"」のaタグが無反応。「class="p_two"」は反応します。

該当のソースコード

HTML

<div id="bottom">
　　<div class="division">
　　　　<img src="assets/images/top/shop_1920.png" alt="shop">
       <h2>Shop</h2>
       <div class="pillar"></div>
       <p class="p_one"><a href="./shop/index.html">SHOP&nbsp;ALL</a></p>
       <p class="p_two"><a href="./news/index.html">NEWS&nbsp;ALL</a></p>
    <!-- division --></div>
<!-- bottom --></div>

css

#bottom {
	display: block;
	width: 100%;
	height: auto;
}

#bottom .division {
	position: relative;
	display: block;
	max-width: 1920px;
    width: 70%;
    height: 70%;
    margin: 15%;
}
.division h2 {
    display:block;
	position: absolute;
　　left: 3%;
	top: -10%;
	font-size: 16vw;
	font-weight: bold;
	color: #000;
	font-family: "Times New Roman", Times, serif;
}
.pillar {
    display:block;
    position: absolute;
    left: 67%;
	top: 50%;
	background-color: #FFF;
    width: 15%;
    height: 101%;
}
.division p a {
    color: #000;
}
.division .p_one {
    display:block;
    position: absolute;
    left: 68%;
	top: -10%;
	font-size: 6vw;
	font-weight: bold;
	color: #000;
	font-family: "Times New Roman", Times, serif;
}
.division .p_two {
    display:block;
    position: absolute;
    left: 68%;
	top: 25%;
	font-size: 6vw;
	font-weight: bold;
	color: #000;
	font-family: "Times New Roman", Times, serif;
}

実現したいイメージ画像です。

Comments

[m.ts10806]

提示されたコードそのままですとoneとtwoが重なってて再現確認難しいのですけど・・
twoを削除してoneだけにした状態で確認しましたが/shop/index.htmlに遷移しましたよ

[y.o-teratail]

ありがとうございます！
重なってしまいますか、その理由が分らないのですが、確かにtwoを削除するとoneはちゃんとリンクが機能してくれました。理由が分らないですが。

[m.ts10806]

css全部無効にした場合はどうでしょう

[y.o-teratail]

ありがとうございます。
cssを全無効にするとちゃんと機能するのでcssのせいだと思います。
position: absolute;しているのが原因かもしれません。

[m.ts10806]

「実現したいイメージ」はいいとして、「今実現している画面」はどうなってますか？

[y.o-teratail]

今現在も画像と同様です

[y.o-teratail]

z-index: 1;の重なり順指定で解決しました。
ありがとうございました！

Answer 1

解決しました。
z-index: 1;の指定で重なり順を指定したところaタグが機能しました。恐らく画像の要素の下に潜っていたのかもれません。

.division .p_one {
    display:block;
    position: absolute;
    z-index: 1;　/*この指定で機能しました*/
    left: 68%;
	top: -10%;
	font-size: 6vw;
	font-weight: bold;
	color: #000;
	font-family: "Times New Roman", Times, serif;
}