angularjs - 变换 : scale div blocks button below it

Question

我根据需要自定义了 g-recaptcha 小部件，它运行良好。但奇怪的是，正下方的 ng-click 按钮不再起作用了。不知道为什么。

这是我的代码示例:

<form>
    ...
    <div class="g-recaptcha" vc-recaptcha key="'secret'"></div>
    <button class="btn-primary" ng-click="clicSignUp()" type="submit">
        Sign Up!
    </button>
</form>

这是 CSS:

.g-recaptcha {
    transform:scale(0.93);
    transform-origin:0 0;
    margin-bottom: -12px;
}

我无法点击“注册”按钮!不再。

Answer 1

看起来 transform 增加了元素的堆叠顺序。你可以给按钮更高的顺序，这样它就不会被 div 覆盖。

button {
  position: relative;
}

还可以根据需要应用 z-index: 1; 或任何更大的数字。