ReCAPTCHA v3 Google 徽章绘制在页面内容下方

Question

请访问此页面：

https://www.publictalksoftware.co.uk/contact-form/

最好使用像 iPhone6s 这样的小 phone。向下滚动到底部：

我知道如何识别某些控件并将它们的 Z 索引设置为 0，从而使徽章覆盖它们，但是为所有内容添加这样的设置将是一场噩梦。

相反，是否有相反的方法？我可以获得此徽章以确保它绘制在页面内容之上吗？

如果您在 PC 上滚动到最底部，问题会更严重。您将鼠标悬停在徽章上，它会显示在页脚区域下方。

我试过这个：

body:not(.page-id-833) .grecaptcha-badge {
  z-index: 99999;
  display: none;
}

不开心。

Answer 1

因此您将徽章设置为显示 none。只需将它设置为在您希望它显示的页面上显示为一个块，就可以使用 important 来覆盖第一种样式。 :)

.grecaptcha-badge {
   display:none;
}
.page-id-833 .grecaptcha-badge {
   z-index: 99999;
   display:block !important;
}

至于高 z-index。这正是您提供的网站上有效的方法。 如果您有问题并且它只适用于您的某些页面。只需将 !important 添加到您的样式表即可。