ReCAPTCHA v3 Google Badge рисуется под содержанием страницы

Question

Пожалуйста, посетите эту страницу:

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

В идеале, пожалуйста, используйте маленький телефон, как iPhone6s. Прокрутите вниз до дна:

Я знаю, как идентифицировать определенные элементы управления и установить их Z-индекс на 0, и, таким образом, значок будет отображаться над ними, но добавлять такие настройки для всего будет кошмаром.

Вместо этого, есть ли способ сделать обратное? Могу ли я получить этот значок, чтобы убедиться, что он нарисован поверх содержимого страницы?

Проблема усугубляется, если вы прокрутите до самого конца на ПК. Наведите указатель мыши на значок, и он отобразит ПОД область нижнего колонтитула.

Я попробовал это:

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

Нет радости

Answer 1

Таким образом, вы устанавливаете значок, чтобы не отображать ни одного. Просто установите его так, чтобы он отображался в виде блока на странице, на которой вы хотите, чтобы он отображался с помощью важно, чтобы переопределить первый стиль.:)

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

Что касается высокого z-индекса. Это только то, что работало на сайте, который вы предоставили. Если у вас есть проблемы, и это работает только на некоторых ваших страницах. Просто добавьте! Важно к вашей таблице стилей.

Answer 2

      function PageLoad() {           // find div which is blocking the page.
  var t = $('div').filter(function ()
  {
  var self = $(this);
  return self.css('z-index') == '2000000000' && self.css('opacity') == '0.05' && 
         self.css('left') == '0px' && self.css('top') == '0px' &&  
         self.css('background-color') == 'rgb(255, 255, 255)';
  }
  );
  if (t.css("visibility") != "hidden") {
    t.css("visibility", "");
    t.css("visibility", "hidden");
    t.css("position", "absolute");
  }
}
$(document).ready(function () {  // Chrome browser is okay with window.onload but IE was not.
                                 // so I used thie way.
                                 // when user hover on 'body' or click.
                                 // blocking div will be modified.
  $("body").hover(function () {
    PageLoad();
  });
  $("body").click(function() {
    PageLoad();
  });
  $(document).on('vclick',function(){
    PageLoad();
  });
  $(document).on("tap",function(){
    PageLoad();
  });
});