CODEWITHSUNDEEP
htmlcss
nadr
nadr

Reputation: 17

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

Upvotes: 0

Views: 63

Answers (2)

aprouja1
aprouja1

Reputation: 1810

CSS identifiers cannot start with a number. try renaming your classes like this

.main {
  position: relative;
}

.dg-cta {
  position: absolute;
  top: 100px;
  left: 75px;
}
<div class="main">
  <img src="{{media url=" wysiwyg/media/newfor2020/main-bg.jpg "}}" alt="" />

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

</div>

Upvotes: 2

Alberto Rhuertas
Alberto Rhuertas

Reputation: 773

You can use classes starting with numbers but you need to put the first number like this in the .css. Check this for more info.

.\32 020-main {
position: relative;
}

.\32 020-dg-cta {
position: absolute;
top: 100px;
left: 75px;
}
<div class="2020-main">
<img src="https://picsum.photos/200/300" 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>

Upvotes: 2

Related Questions