Essentially, what I was attempting to do was overlay some text on top of an image on a website I'm creating. After researching online, I learned that I could achieve this by using position absolute and relative, which worked to some extent. However, now my text is getting hidden under the image instead of appearing on top of it.
.lol__header {
display: flex;
}
.lol__header-content {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
margin-right: 5rem;
position: relative;
}
.lol__header-content h1 {
font-family: var(--font-family);
font-weight: 800;
line-height: 62px;
letter-spacing: -0.04rem;
position: absolute;
right: 50%;
left: 50%;
bottom: 15%;
}
.lol__header-image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.lol__header-image img {
width: 100%;
height: 100%;
}
React code:
const Header = () => {
return (
<div className="lol__ section__padding" id="home">
<div className="lol__header-content">
<h1 className="gradient__text">
{" "}
Labor of Love International Ministries
</h1>
<div className="lol__header-image">
<img
src={frontPage}
alt="image of Pastor Wayne Preaching"
></img>
</div>
</div>
</div>
);
};