CSS position: absolute;の指定でボタン画クリックできない！z-indexが効かない原因と解決方法

CSSでSNSフォローボタンをカスタマイズしていて、position: absolute;を使いスタイルを重ねて・重ねてカスタマイズをしおわった時。肝心のフォローボタンをクリックしても反映しない事が起こりました。

その原因と解決法をサクッと紹介します。

原因：position absoluteで、ボタン上に領域を重ねている
1. 反映しないボタンを::afterの前・上に置くCSSを追加する
z-indexを指定しても反映しない原因
1. positionが初期値以外のスタイルがある領域にz-indexを追加
さいごに

原因：position absoluteで、ボタン上に領域を重ねている

疑似要素のbefore・afterを使って、ボタンとほぼ同じ大きさの領域を指定し、after（beforeも同様）がボタンを隠している状態。

ボタンが下にあり

afterがボタンをおおってる！

SNSフォローボタンではなく、SNSボタン::after上記画像の領域をクリックしてるワケです。CSSのposition: absolute;を使ってボタンを隠している感じ。そりゃ、ボタンは利かないやぁ＾＾；

ボタンを上に持ってくればOK！

SNSボタンをその領域::afterの前に出してあげると反映します。

反映しないボタンを::afterの前・上に置くCSSを追加する

z-indexというCSSは、重なった要素を前に出したり、逆に後ろに出したりできます。

z-index: 1;これで何の指定もないと前に出ます。

SNSシェアボタンのスタイルは簡単に以下の通り。

.article ul.snsp {
	background: #fffcfdde url(画像のURL) no-repeat bottom;
	width: 320px;
	max-width: 100%;
	margin: 1.2em auto 0;
	padding: 1.2em 0 2em;
	transform: rotate(-1deg);
}

これにz-index: 1;を追加しても反映しません。

z-indexを指定しても反映しない原因

z-indexはpositionの指定が無いと反映しません。
指定がないってことはpositionの初期値でstatic。

この場合特に位置を移動させたり、固定させた状態ではない状態だと書いても無風、何も起こりません。

positionの値は、以下3つ。それと上述の初期値static

動きのあるabsolute
基準のrelative
固定しなさいのfixed（トップに戻るボタンやグローバルナビなどにも利用）

3つの指定があると反映します。

positionが初期値以外のスタイルがある領域にz-indexを追加

afterがSNSボタンをおおってる場合

SNSボタンは基準である0となるので、::afterにz-index: -1;と指定することでボタンが前に来ます。言い換えれば::afterが後ろに引っ込んでくれます。

::afterが下へ。

ちなみに::afterのスタイルは以下。

.article .sns-pages:after {
	content: "";
	position: absolute;
	width: 380px;
	max-width: 100%;
	height: 135px;
	top: 0;
	right: -5px;
	transform: rotate(5deg);
	background-color: #ff4ef4ab;
	z-index: -1;
}

position: absolute;の指定があるので、z-index: -1;が反映！SNSボタンの後ろに下がったからボタンもクリックできるわけです！

分かりやすいページは以下ですかねぇ＾＾

LINKz-index …… 重なりの順序を指定する｜スタイルシートリファレンス