Transform: scale div 块下方的按钮

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;
}

我无法再点击按钮 "Sign Up!"。

Answer 1

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

覆盖

button {
  position: relative;
}

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

Transform: scale div 块下方的按钮

Transform: scale div blocks button below it

css

css-transforms

angularjs