HTML 5对话框元素重叠谷歌验证码

Question

我遇到了验证码和HTML5对话框元素的问题，我的对话框重叠验证码图像

我已将我的dilogbox的z-index更改为0，但仍然重叠。我正在使用dialog-polyfill。我如何解决这个问题？

此问题在Mac Google Chrome版本52.0.2743.116（64位）

中发生

请在此处查看jsfiddle链接：

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

https://jsfiddle.net/a8793aop/

Answer 1

我发现了这个问题，我使用showModal（）而不是show（）来显示对话框。 showModal（）会将对话框添加到“顶层”。 z-index属性在顶层中无效。 HTML5 top layer