绝对定位的黑色 div 不透明度不覆盖某个元素，我不知道为什么

Question

我有一个模态窗口，它有一个绝对定位的黑色 div，只要模态窗口打开，它就会覆盖整个视口。 出于某种原因，尽管这个窗口不会覆盖某个元素，即使它越过它。 其他所有内容都被黑屏覆盖，所以我不知道为什么这个特定元素没有。

.black-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
}

未被覆盖的元素：

<div class="form-container">
    <form class='send-message'>
        <input class='message-input' placeholder="Type a message">
    </form>
</div>

以及该元素的 CSS：

.form-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.send-message {
    position: relative;
    padding: 20px 0px 20px 20px;
    flex: 1;
}
.message-input {
    width: 100%;
    padding: 15px;
    outline: none;
    border: none;
    background-color: #40444b;
    color: #dcddde;
    font-size: 14px;
    border-radius: 5px 0 0 5px;
}

Answer 1

使用一小块 css 我只能猜测（css 是一个级联并且是遗传的）

.form-container {
    position: relative;             /* remove this */
    display: flex;
    justify-content: center;
    align-items: center;
}
.send-message {
    position: relative;             /* remove this */
    padding: 20px 0px 20px 20px;
    flex: 1;
}
.message-input {
    width: 100%;
    padding: 15px;
    outline: none;
    border: none;
    background-color: #40444b;
    color: #dcddde;
    font-size: 14px;
    border-radius: 5px 0 0 5px;
}

如果由于某种原因这是不可能的或不起作用 - 替换 div 元素，但我不知道这是否适用于每个浏览器......

<div class="form-container">
    <form class='send-message'> <input class='message-input' placeholder="Type a message">  </form>
</div>
<div class="black-screen">black</div>

如果问题仍然存在，使用Validator w3c 来找出它有多糟糕……实际上，无论如何都使用Validator