Positionieren von Text über ein Bild

Question

Ich weiß, es beinhaltet Position Absolute und Relative, ich habe es selbst versucht, konnte es nicht herausfinden, also habe ich versucht, einen Leitfaden zu finden. Alle Anleitungen, die ich gefunden habe, sind entweder veraltet oder funktionieren nicht.

Hat jemand eine aktuelle/Anleitung, die funktioniert?

Answer 1

So ähnlich?

.container { 
 
    position: relative; 
 
} 
 

 
.container img { 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: #AAF; 
 
} 
 

 
.container .text { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 30px; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <div class="text">Foo Bar</div> 
 
</div>