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窗口仍然出现以外，它都可以正常工作在微调框顶部。

Spinner CSS：

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

我尝试了其他方法，包括给微调框指定z-index：-1，不透明度：.99，并尝试为iframe提供一个绝对位置和比该微调框更高的z-index，并为该微调框提供相对位置

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

预先感谢

更改youtube iframe的Z索引

0 个答案: