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

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

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

スポンサーリンク

原因: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シェアボタンのスタイルは簡単に以下の通り。

これに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のスタイルは以下。

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

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

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

さいごに

実際z-indexを使えば、重なりの前や後ろに移動する認識が強かったけど、実はpositionの指定と関係がなければ反映しないって事、今回でよくわかりました❦

CSSは面白いですね^^

圧倒的に分かりやすいのと、CSSのプロパティが沢山入ってて一気に思い通りのスタイルを作れるから、この本はオススメ❦

ではでは、かうたっくでした^^

スポンサーリンク

シェアする

フォローする

トップへ戻る