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>

Answer 2

您可以使用以数字开头的类，但是需要将这样的第一个数字放在.css中。 Check this了解更多信息。

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

在图片上方放置div

2 个答案: