I am facing an issue with a modal window that includes an absolutely positioned black div covering the entire viewport when the modal is open. Strangely, this black screen fails to cover a specific element even though it should. This particular element remains visible despite the overlay. I cannot figure out why this specific element is not being covered while everything else is.
.black-screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
The element causing the issue:
<div class="form-container">
<form class='send-message'>
<input class='message-input' placeholder="Type a message">
</form>
</div>
Here is the CSS for that element:
.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;
}