CODEWITHSUNDEEP
htmlcss
Onyx
Onyx

Reputation: 5780

Absolutely positioned black div with opacity does not cover a certain element and I can't figure out why

I have a modal window which has an absolutely positioned black div that covers the entire viewport whenever the modal window is open. For some reason though this window doesn't cover a certain element even though it goes over it. Everything else is covered by the black screen just fine so I have no idea why this specific element doesn't.

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

The element that is not being covered:

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

And the CSS of 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;
}

Upvotes: 2

Views: 55

Answers (1)

black blue
black blue

Reputation: 819

With small chunk of css I can only guess (css is a cascade and is hereditary)

.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;
}

If for whatever reasons this is not possible or it doesn't work - replace div elements but I don't know if this will work in every browser ...

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

If the problem persists, use Validator w3c to find out how bad it is ... in fact, use Validator no matter what

Upvotes: 2

Related Questions