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