HTML 5 个对话框元素重叠 google 验证码

HTML 5 Dialog element overlapping google captcha

我的验证码和 HTML5 对话框元素有问题,我的对话框与验证码图像重叠

我已将我的 dilogbox 的 z-index 更改为 0,但它仍然重叠。我正在使用对话框 polyfill。我该如何解决这个问题?

此问题发生在 Mac Google Chrome 版本 52.0.2743.116(64 位)

请在此处查看 jsfiddle link:

<div class="container">
    <dialog class="auth">
    <div id="recaptcha"></div>
    </dialog>
</div>

https://jsfiddle.net/a8793aop/

我发现了问题,我使用的是 showModal() 而不是 show() 来显示对话框。 showModal() 会将对话框添加到 "top layer"。 z-index 属性 在顶层没有影响。 HTML5 top layer