Google reCAPTCHAのバッジが他の要素に隠れて見えない

Googleのリキャプチャを実装したら、リキャプチャバッジが他の画面要素に隠れて見えなくなってしまったのでメモ。

結論から言うとCSSのクラス .grecaptcha-badge に対して z-index を指定するなどして、他の要素よりも前面に出してあげることで解決とした。
他の要素より前に来るなら、1 でも 101 でも 999 でも z-index の数値はなんでもいい。

CSS

.grecaptcha-badge {
  z-index: 999;
}

ちなみに余談だが、リキャプチャバッジを非表示にすることもGoogle側は認めているようだ。

ユーザーフローに、reCAPTCHA を使用してサイトを保護していることと、「Google の利用規約とプライバシー ポリシーが適用される」ことを明示しているのであれば、バッジを非表示にできます。次のテキストを含めてください。

サンプルコード

This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.

バッジを非表示にする場合は、次のコードを使用してください。

CSS

.grecaptcha-badge { visibility: hidden; }

参考URL

reCAPTCHA > Documentation > リソース > よくある質問 > reCAPTCHA バッジを非表示にしたいのですが、どうすればよいですか？
reCAPTCHA v3 ロゴマークを非表示にする方法
Google reCAPTCHAの中央寄せ
CodePen | reCAPTCHA Responsive Scaling