React JS Backdrop在显示按钮单击后出现在Modal的前面

Question

我试图在Modal with Backdrop中创建React JS。切换按钮时将出现“模态和背景”。为了显示模态，我只是将transform: translateY(0)更改为transform: translateY(-100vh)。对于背景，我只需将null更改为backdrop div。

[为了控制堆叠，我将模式z-index设置为500，背景z-index设置为100。

[我切换按钮后，即使z-index较低，背景也会堆叠在我的Modal前面。当我直接在浏览器中更改背景的opacity时，模型堆叠在背景的前面

当我删除所有显示触发器时（因此每重新加载页面时都会显示模态和背景幕，则堆叠是正确的。

我仍然不明白为什么会这样。我已经阅读了z-index中的堆叠规则（MDN），但是我不知道要解决这个问题。

这是我返回的Modal.js代码：

<div>
    <Backdrop showBackdrop={props.showModal}/>
    <div 
        className="Modal"
        style={{transform: props.showModal ? translateY(0) : translateY(-100vh)}}>
        {"Here is the Content"}
    </div>
</div>

这是我的Backdrop.js代码：

props.showBackdrop ? <div className="Backdrop"></div> : null

CSS：

.Modal {
    position: fixed;
    background-color: grey;
    z-index: 500;
    width: 50%;
    height: 30%;
    padding: 2.5%;
    left: 22.5%;
    transition: all 0.3s ease;
}

.Backdrop {
    position: fixed;
    z-index:100;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 50%;
}

Answer 1

将<Backdrop .../>组件移动到div.Modal下方，如下所示。同样，translateY(0)和translateY(-100vh)应该采用字符串形式，如以下代码所示：

<div>
    <div 
        className="Modal"
        style={{transform: props.showModal ? `translateY(0)` : `translateY(-100vh)` }}>
        {"Here is the Content"}
    </div>
    <Backdrop showBackdrop={props.showModal}/>
</div>