html - 将 div 定位在图像之上

Question

我意识到这可能已被问过 10000 次，但我终究无法弄清楚为什么它对我不起作用...

正如标题所说，我有一个“背景”图像，我想在其上放置文本/链接，下面是我的代码:

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>

据我了解，您给包含的 div (2020-main) position: relative; 和子 div (2020-dg-cta) position: absolute; ，但这似乎对我不起作用。 .2020-main 出现在图像下方，通常没有样式。

非常感谢任何帮助

谢谢

Answer 1

CSS 标识符不能以数字开头。尝试像这样重命名你的类

.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>