I'm trying to display a text upon the red colored after element with the increased z-index, but it fails. Maybe there is even a better approach to make a red bottom element and a padding https://codepen.io/alex-filippovich/pen/QWZbXMe
.wrapper {
margin: 0 auto;
}
.wrapper__img-outer {
padding: 10px;
height: 190px;
width: 330px;
background: center / cover no-repeat url("https://place-hold.it/330x190");
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.wrapper__img-outer:after {
content: '';
background-color: red;
position: absolute;
width: 100%;
height: 54px;
bottom: 0;
left: 0;
z-index: 1;
}
.text {
z-index: 10;
}
<div class="wrapper">
<div class="wrapper__img-outer">
<div class="wrapper__img-top">
<p class="text">text</p>
</div>
<div class="wrapper__img-bottom">
<p class="text">text</p> // this text not being displayed
</div>
</div>
</div>
You'll need to set position
to relative
on the text
class:
.text {
z-index: 10;
position: relative;
}
.wrapper {
margin: 0 auto;
}
.wrapper__img-outer {
padding: 10px;
height: 190px;
width: 330px;
background: center / cover no-repeat url("https://place-hold.it/330x190");
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.wrapper__img-outer:after {
content: '';
background-color: red;
position: absolute;
width: 100%;
height: 54px;
bottom: 0;
left: 0;
z-index: 1;
}
.text {
z-index: 10;
position: relative;
}
<div class="wrapper">
<div class="wrapper__img-outer">
<div class="wrapper__img-top">
<p class="text">Top text</p>
</div>
<div class="wrapper__img-bottom">
<p class="text">Bottom text</p>
</div>
</div>
</div>