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

Answer 2

您可以使用以数字开头的类，但您需要将第一个数字像这样放在.css 。 检查这个以获取更多信息。

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