How can I make flexbox overlay with object-fit working properly - css

Question

This may be a begginer question, but I just can't seem to figure it out.
HTML:
<div id = "upper">
<input id = "leftBigArrow" class = "button" type="button">
<div id = "picBox">
<img id = "bigPic" src="images/IMG_1744.JPG" alt="">
<div id = "overlay">
<div id = "olText">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
</div>
<input id = "rightBigArrow" class = "button" type="button">
</div>
CSS:
#upper {
display: flex;
background: white;
box-shadow: 0px 0px 7px 2px #313131;
}
#picBox {
width: 800px;
height: 600px;
background-color: #8D918D;
display: flex;
}
#pigPic {
object-fit: contain;
object-position: center;
z-index: 1;
}
#overlay {
align-self: flex-end;
width: 100%;
height: 20%;
background-color: black;
color: white;
opacity: 0.6;
margin: 0;
font-size: 80%;
z-index: 2;
}
#olText {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
}
h1, p {
margin-left: 20px;
}
h1 {
margin-top: 0;
margin-bottom: 10px;
}
p {
margin-top: 0;
margin-bottom: 0;
}
In #picBox I have 2 items, an image (#bigPic) with object-fit attribute and a div with a div with 2 text items (#overlay). I want to have the overlay over the image. Overlay height is 20% at the bottom of #picBox and the 2 text items in #olText need to be arranged as css shows. If I use position absolute and relative, it messes up the object-fit. So how can I make this work as I intended?

Answer 1

In CSS, if you want to overlay an element, that element's position (in this case #picBox) needs to be set to relative first. Then the position of the element you want on top (#overlay) should be set to absolute. See the example below.
#upper {
display: flex;
background: white;
box-shadow: 0px 0px 7px 2px #313131;
}
#picBox {
width: 800px;
height: 600px;
background-color: #8D918D;
display: flex;
position: relative;
}
#pigPic {
object-fit: contain;
object-position: center;
z-index: 1;
}
#overlay {
align-self: flex-end;
width: 100%;
height: 20%;
background-color: black;
color: white;
opacity: 0.6;
margin: 0;
font-size: 80%;
z-index: 2;
position: absolute;
}
#olText {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
}
h1,
p {
margin-left: 20px;
}
h1 {
margin-top: 0;
margin-bottom: 10px;
}
p {
margin-top: 0;
margin-bottom: 0;
}
<div id="upper">
<input id="leftBigArrow" class="button" type="button">
<div id="picBox">
<img id="bigPic" src="https://www.w3schools.com/tags/img_pink_flowers.jpg" alt="">
<div id="overlay">
<div id="olText">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
</div>
<input id="rightBigArrow" class="button" type="button">
</div>