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

Question

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

.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