事業部在圖像沒有絕對定位

Question

我堅持這個......我的目標是此頁：

我想文本放置的圖像，例如「施塔爾登」。我知道如何做到這一點，但是當我使用絕對定位並插入新條目時，文本與之前的文檔處於相同的位置。我該如何解決這個問題？

任何幫助非常感謝！

這是我有：

<div class="karte"> 
     <img src="img/home/stalden.png" alt=""> 
     <h1>STALDEN</h1> 
    </div> 

CSS

.karte img { 
    width: 100vw; 
} 


.karte h1 { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    color: white; 
    font-family: "Teko", sans-serif; 
    font-size: 15vw; 
} 

Answer 1

您可以使用圖像作爲部分的背景

.karte { 
 
    background: url('img/home/stalden.png'); 
 
}

<div class="karte"> 
 
    <h1>STALDEN</h1> 
 
</div>

Answer 2

試試這個：

.karte{ 
    position: relative; 
} 

.karte img{ 
position: absolute; 
top: 0; 
left: 0; 
} 

.karte h1{ 
position: absolute; 
top: 50px; 
left: 50px; 
} 

這正是你問的。但是由於更好的語義和其他原因，最好在這裏使用background-image ......只需使用background-image即可。這是更好的解決方案。