0

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

nadr
  • 17
  • 8

2 Answers2

2

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>
AlexG
  • 5,649
  • 6
  • 26
  • 43
aprouja1
  • 1,800
  • 8
  • 17
2

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>
Alberto Rhuertas
  • 733
  • 4
  • 12
  • Interesting solution, might get tedious to work with though. – AlexG Dec 03 '19 at 12:39
  • Very interesting solution. I would say this is also an accepted answer, but I cannot choose both, so I went with AlexG's. Thank you for your help :) – nadr Dec 03 '19 at 12:42