css - 更改 youtube iframe 的 z-index

Question

在 React 中，我有一个父组件和一个子组件。父级显示一个 iframe，返回这个 jsx：

<div className={cx("col-md-6", classes.BWrapper)}>
            <iframe className={classes.Iframe} width="100%" src="https://www.youtube.com/embed/OVoFzu-vH4o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>

然后子组件处理一些异步代码，并在执行此操作时将状态更改为加载并显示微调器

return (
            <div className={globalStyles.Card}>
                <div className={cx("card-header", globalStyles.CardHeader)}>
                    <ul className="nav nav-tabs card-header-tabs">
                        {formTypesJsx}
                    </ul>
                </div>
                <div className="card-body">
                    <div className="tab-content">
                        <div role="tabpanel" className="tab-panel" id="signup-form">

                        {this.props.loading && (<div><Backdrop show/><Spinner/></div>)}

我想在子组件中显示一个应该以灰色覆盖父元素的微调器并不理想，但是我使用 z-index 设置微调器元素并且它工作正常，除了 iframe 窗口仍然出现在顶部微调器。

微调器CSS：

.Center {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
}

我尝试了不同的东西，包括给微调器 z-index: -1 ， opacity: .99 并且还尝试给 iframe 一个绝对定位和比微调器更高的 z-index，并给微调器相对位置

有什么我想念的吗？为什么只有 iframe 出现在微调器的顶部？

提前致谢

标签： cssreactjsz-index