Overlay for a grid item - css

Question

I am using React and I am trying to have an overlay over each grid item in a grid. But, what all I try, the overlay seems to come below each grid item and not over the grid item. Even if I use the position: absolute it is not working !
Here's the code I am using for the grid (React):
<div className="home__itemSection">
<div className="item">
<div className="item__container">
<div className="container__imageDiv">
<img
src={""}
alt=""
/>
</div>
<div className="container__detailSection">
<p>{""}</p>
<h6>{""}</h6>
</div>
</div>
<div className="item__overlay">
<h1>{""}</h1>
<h1>{""}</h1>
</div>
</div>
</div>
css:
.home__itemSection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin: 30px 170px 0 170px;
transition: ease all 0.5s;
}
.item {
background-color: #f1f1f1;
height: 350px;
width: 212px;
margin: 0 3rem 1rem 3rem;
height: fit-content;
font-family: "Poppins", sans-serif;
display: flex;
align-items: flex-start;
}
.container__imageDiv {
height: 318px;
width: 212px;
}
.container__imageDiv > img {
height: 318px;
width: 212px;
}
.container__detailSection {
height: 44px;
width: 212px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 5px;
}
.container__detailSection > p {
color: black;
font-size: 13px;
font-weight: 300;
line-height: initial;
}
.container__detailSection > h6 {
padding-left: 1.8rem;
font-weight: 500;
font-size: 1rem;
}
.item__overlay {
height: 252px;
width: 212px;
background-color: black;
}
Any help is greatly appreciated !
Thank You !

Answer 1

Please add position: relative; on item(parent tag of overlay)
.item{
position: relative;
}
.item .item__overlay{
position: absolute;
left: 0;
top: 0;
}

Answer 2

An element with position absolute is relative to the next parent element with relative (or absolute) positioning.
Add position relative to home__itemSection. Also use height and with to cover all the container:
.home__itemSection {
...
position: relative;
}
.item__overlay {
...
position: absolute;
height: 100%;
width: 100%;
}