Positioning a div on top of an image

I realize this has probably been asked 10000 times at this point, but I can't for the life of me figure out why it isn't working for me...

As the title says, i have a "background" image that i want to place text/links on top of, below is my code:

CSS

.2020-main {
position: relative;
}

.2020-dg-cta {
position: absolute;
top: 100px;
left: 75px;
}

HTML

<div class="2020-main">
<img src="{{media url="wysiwyg/media/newfor2020/main-bg.jpg"}}" alt="" />

<div class="2020-dg-cta">
<div class="2020-cta-brand">Dreamgirl</div>
<div class="2020-cta-name">Main Collection</div>
<div class="2020-cta-button"><a href="">View Catalogue</a></div><div class="2020-cta-button"><a href="">Shop Collection</a></div>
</div>

</div>

From my understanding, you give the containing div (2020-main) position: relative; and the child div (2020-dg-cta) position: absolute;, but this doesn't seem to work for me. .2020-main appears below the image, as it usually would without styling.

Any help would be highly appreciated

Thank you