Absolutely positioned black screen covers the text of a div but not the image and I don't understand why

Question

As you can see in the code below, the absolutely positioned black screen div covers the members's username but not the actual image. The image stays over the black screen as if it has high z-index, but it doesn't. Is there any way to make the black screen cover the image without completely rewriting the CSS?

.members {
    width: 239px;
    background-color: #2f3136;
}
.member {
    display: flex;
    align-items: center;
    padding: 30px 20px 30px 20px;
}
.member-image-container {
    position: relative;
    margin-right: 10px;
}
.member-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.member-username {
    font-weight: 500;
    color: #8e9297;
    margin-right: 10px;
}
.crown {
    color: #faa61a;
}
.online-indicator,
.offline-indicator
{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
}
.online-indicator {
    background-color: #43b581;
}
.offline-indicator {
    background-color: #747f8d;
}
.black-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
}

<div class='navigation'>
    <div class='modal'>
        <div class="black-screen"></div>
    </div>
</div>
<div class='server'>
    <div class="members">
        <div class="member">
            <div class="member-image-container">
                <img class='member-image' src="https://api.adorable.io/avatars/100/BozhidarKabzamalov">
                <div class='online-indicator'></div>
            </div>
            <span class='member-username'>Username</span>
        </div>
    </div>
</div>

Mehedi Hasan Siam · Accepted Answer · 2020-09-20T16:24:30.897

Just add position: relative; in member-username

Hope it will work.

.members {
    width: 239px;
    background-color: #2f3136;
}
.member {
    display: flex;
    align-items: center;
    padding: 30px 20px 30px 20px;
}
.member-image-container {
    position: inherit;
    margin-right: 10px;
}
.member-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.member-username {
    font-weight: 500;
    color: #8e9297;
    margin-right: 10px;
    position: inherit;
}
.crown {
    color: #faa61a;
}
.online-indicator,
.offline-indicator
{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
}
.online-indicator {
    background-color: #43b581;
}
.offline-indicator {
    background-color: #747f8d;
}
.black-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
}

<div class='navigation'>
    <div class='modal'>
        <div class="black-screen"></div>
    </div>
</div>
<div class='server'>
    <div class="members">
        <div class="member">
            <div class="member-image-container">
                <img class='member-image' src="https://api.adorable.io/avatars/100/BozhidarKabzamalov">
                <div class='online-indicator'></div>
            </div>
            <span class='member-username'>Username</span>
        </div>
    </div>
</div>

I don't want for the username to not get covered too, I want the image to get covered by the black screen. — Onyx, Sep 20 '20 at 16:20
that means you want to get covered both username and image by black screen? — Mehedi Hasan Siam, Sep 20 '20 at 16:22
if so that you can add position: inherit to .member-image-container class — Mehedi Hasan Siam, Sep 20 '20 at 16:23

Absolutely positioned black screen covers the text of a div but not the image and I don't understand why

1 Answers1